CSS实现顶部底部高度固定，中部高度自适应。（flex布局，小程序，中部含scroll-view 标签）

 wxml 代码 :

<view class="content">
                <view class="header">
                   ...
                </view>
                <view class="body">
                    <scroll-view class="bodyscroll" scroll-y enable-flex>
                        <view class="">
                           
                        </view>
                        <view class="">
                          
                        </view>

                        ...

                    </scroll-view>
                </view>
                <view class="footer">
                    ...
                </view>
</view>

wxss 代码 ：红色部分是重点代码

/*外部包裹*/

.content{

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height:100vh;

}

/*头部*/

.content .header{

    height: 330rpx;/*高度固定*/

}

/*中部*/

.content .body {

    flex: 1;

    overflow: hidden;

    overflow-y: scroll;

    /*上面这句看情况加，我这里可以不加

（1）情况一：因为我中部里面用了scroll-view 标签，所以可以不加。

（2）情况二：中部里面没用scroll-view 标签，则必须加，否则会直接隐藏溢出内容不显示的。（也就是滚动不了）

    具体可看下方链接的介绍：

    CSS3 overflow-y 属性 | 菜鸟教程 (runoob.com)

    */

}

.bodyscroll{

    height: 100%;/*scroll-view 标签要给高度，才能有滚动效果*/

}

/*底部*/

.content .footer{

    width: 100%;

    height: 80rpx;/*高度固定*/

}

注意：

不要给 footer底部 加 position : fixed 固定定位 了，加了会使其脱离文档流，脱离文档流后就会浮上来，在页面上不会占据空间，导致中部的高度会包括被footer挡住的那部分，这可能会导致中部最下面的部分内容被遮挡。