微信小程序布局 头尾固定中间自适应

最常见的一种布局

<view class="header">HEADER</view>
<view class="body">BODY</view>
<view class="footer">FOOTER</view>

page{
  height: 100%;
  display: flex;
  flex-direction: column; 
  color:white
}
.header{
  background: #436EEE;
}
.body{
  background: #8B4789;
  flex: auto; 
}
.footer{
  background: #436EEE;
}