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

<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;
         100%;
        height: 100%;
    }
.container {
   100%;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
 
}
 
.header {
 
  height:100rpx;
  background-color: #00C6B2;
}
.body{
      background: red;
      overflow-y: scroll;  
}
 
</style>

效果：