使用flex实现顶部和底部固定，中间自适应

一、前言

在日常开发中，常常见到这种效果，顶部固定一个标题栏，中间是一个布局，底部固定一个提交按钮。中间表单部分太长的话可以滑动，如果不长的话，底部按钮会跟随在中间布局后面。

效果一：

效果二：

二、简要代码：

本文是在uniapp上开发的，所以其它平台可能会有问题。另外本文的代码主要是整体页面布局，所以实际效果和上文示例图不一样。代码如下：

<template>
	<view class="page-box">
        <view class="head-box">
    	</view>
        <view class="content-box">
    	</view>
        <view class="footer-box">
    	</view>
    </view>
</template>

<style lang="scss">
    page {
		background-color: #FFF;
	}
    .page-box {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
   	.head-box {
		flex-shrink: 0;//保持内容不缩放，适用于内容不确定大小时候
        // height:100rpx; //设置高度为100，如果内容确定为这么高的话
	}
    .content-box {
		flex-grow: 1;//充满屏幕
		// height: 300rpx; //如果中间不充满屏幕的话，自适应，底部会跟随在中间布局后面
		overflow: auto;
	}
    .footer-box {
		flex-shrink: 0;//保持内容不缩放，适用于内容不确定大小时候
        // height:100rpx; //设置高度为100，如果内容确定为这么高的话
	}
</style>

三、参考链接

1. https://blog.csdn.net/betty13006159467/article/details/82216629