uni-app 布局固定头部，内容滚动

1 代码 

<template>
	<view class="container">
	 <!-- toubu -->
	 <view class="header">
		 <text>头部</text>
	 </view>
	 <!-- 主要内容 -->
	  <view class="body">
		  <view>
			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  <view>
		  			   <text>abc</text>
		  </view>
		  
		    
	  </view>

	</view>
</template>

<script>
</script>

<style>
	page{
		display: -webkit-box;
		width: 100%;
		height: 100%;
	}
.container {
  width: 100%;
  display: flex;
  min-height: 100vh;
  flex-direction: column;

}

.header {

  height:100rpx;
  background-color: #00C6B2;
}
.body{
	  background: red;
	  overflow-y: scroll;  
}

</style>

2 效果