在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是没有绝对定位的
