flex布局的一些坑（底栏顶栏固定）

<template>
	<view class="content">
		<view class="h">header</view>
		<view class="m">main</view>
		<view class="f">footer</view>
	</view>
</template>

<style>
	page{
		border: 1rpx solid #ffaaff;
		height: 100%;//整个页面的高度，不写
		//这个默认是你所有元素高度和，自然不可能实现底部顶部固定了
	}
	.content {
		display: flex;//弹性布局
		height: 100%;//外层容器的高度，也需要100%
		flex-direction: column;//纵向排列（一个元素占一行）
		width: 100%;
		border: 1rpx solid #007AFF;
	}
	.m{
		flex: 1;//flex弹性布局flex参数，本应该三个值，后两个可省且此处无用，故只写第一个参数，其意为该组件所占比列，1为占满，通俗的说，本文代码中，外层容器含有h,m,f三个元素，m元素占据除了h,f元素外的所有空间，实现顶部底部固定
		overflow-y: scroll;//中间超出高度可以滚动
	}
</style>

下图页面高度是90%，外层容器高度80%。必须设置这两项的高度为100%才能达到顶栏低栏固定的目的