前言

在使用scroll-view组件时，总是希望它的高度刚好为屏幕的剩余高度。如果通过获取屏幕高度的api来设置高度，会比较麻烦。而使用flex布局可以很轻松。

使用到的css属性

主要有如下一些css属性：

display: flex;
flex: 1 1 0;
height: 0;
flex: 0 0 auto;

这里有一个简单的例子，，其中关键的地方都会有注释。

<-- 模板 -->
<view class="page">
    <view class="nav">导航栏</view>
    <-- scroll-y属性开启允许纵向滚动 -->
    <scroll-view class="scroll-view" scroll-y>
        <view v-for="item in 100" :key="item">
            {{item}}
        </view>
    </scroll-view>
</view>

<-- css -->
.page {
    height: 100%;
    <-- 开启flex模式 -->
    display: flex;
    flex-direction: column;
}

.nav {
    height: 50rpx;
    <-- 代表grow, shirnk, basis。 0代表既不伸，也不缩。 auto代表基础宽度为元素默认或设置的宽度 -->
    flex: 0 0 auto;
}

.scroll-view {
    height: 0;
    <-- 1代表占满剩余空间。 -->
    flex: 1 1 0;
}

scroll-view组件使用margin、padding属性内容会正常显示吗？

可以使用margin、padding，只要flex布局设置正确，内容会正常显示