h5实现布局：上下固定，中部可以上下滚动

在h5中布局时，尽可能使用flex布局，尽量不要使用绝对定位之类，容易有兼容性问题等~

第一种：

实现绿色list页面可滚动，tab页面固定

<template>
<!-- 最外层div -->
  <div class="page page-test" style="height: 100%;display:flex;flex-direction:column">
  	<!-- 上  这个navbar是有高度的-->
	<van-sticky>
		<van-nav-bar class="nav-bar" left-arrow  @clickleft="onClickLeft"/>
	</van-sticky>
	<!-- 下 flex：1且overflow：hidden -->
    <div style="flex:1;overflow:hidden">
    	<!-- 内层div -->
      <div style="display:flex;flex-direction:column;height:100%">
        <!-- 固定tab 给固定高度 -->
        <van-tabs v-model="activeName" @click="onClick" type="card" class="tab-box" style="height:35px">
          <van-tab title="我参与的" name="1" v-if="FUNCTION_JOIN">
          </van-tab>
          <van-tab title="我创建的" name="2" v-if="FUNCTION_CREATE">
          </van-tab>
          <van-tab title="抄送我的" name="3" v-if="FUNCTION_SEND">
          </van-tab>
        </van-tabs>
        <!-- 可滚动区域：   flex：1且 overflow：scroll-->
        <div style="flex:1;overflow:scroll">
          <panelList v-if="testTab" :tab="activeName" ref="panel"></panelList>
        </div>
      </div>
    </div>
  </div>
</template>

在panelList组件里面：按钮固定，上方可滚动

<template>
  <div class="page my-join-box">
  ·<!-- 滚动-->
    <van-list v-model="loading" class="van-list-style">
      <div class="list">…………</div>
    </van-list>
    <!-- 按钮固定 -->
    <div class="btn-box" v-if="FUNCTION_CREATEVOTE">
      <van-button block type="info" native-type="submit">
        新建投决
      </van-button>
    </div>
  </div>
</template>


<style lang="scss" scoped>
// 上方的div需要留出button区域的高度
  .van-list-style {
    margin-bottom: 152px;    
  }
// btn区域需要绝对定位
  .btn-box {
		padding:32px;
		background:#fff;
		width: 100%;
		position: fixed;
		bottom: 0px;
    	left: 0px;
    	box-shadow: 0px -1px 1px 0px #DDDDDD;
	}  

第二种：

代码：


注意这里的btn-box是没有绝对定位的