微信小程序 scroll view 占据页面剩余高度

假设页面

• 顶部是一个 banner，class 为 top
• 余下部分是一个 scroll view，占据了页面剩余的高度

实现方法

Page {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.top {
}

.bottom {
  flex: 1;
}

在没有数据时，这样的布局看上去没有问题。但是一旦填充上数据，会发现 scroll view 的高度会被撑开。

真正的实现方法。。。

<view class="bottom">
    <scroll-view class="sv" scroll-y="true">
    </scroll-view>
</view>

给 scroll view 外面包一层 view:

.bottom {
  flex: 1;
  height: 100px; /* 黑科技，任意值 */
}

.sv {
  height: 100%;
}

iphone 5,6 低版本 ios 系统的兼容问题

使用 height 100px 这种黑科技，实际上在低版本的 ios 系统上会有兼容问题。

如果是占全屏，推荐使用 height 100vh，但是只占一部分，除了计算高度，暂时没有找到好方法。

微信关注我哦 👍

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式

tags: flex 布局