h5页面调试:
h5页面调试:375 * 603
iPhone6/7/8 375 * 667 - 路由title的尺寸
布局:
场景一:
页面上半部分是列表,列表数据较多可下拉;
页面底部是操作按钮,按钮固定,有高度。
理想效果:
列表部分正常滚动,按钮固定,滚动条只在上半部分,不涉及底部按钮区域。
实现:
大盒子设置flex,小盒子1设置flex为1,小盒子2设置高度。
<div class="container">
<div class="table"></div>
<div class="btn"></div>
</div>
.container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
.table {
flex: 1;
overflow: auto;
}
.btn {
height: 200px;
}
}