1. 没header，footer固定 html
<div class="page">
<div class="top">
<div>sdnjsdcnddfre测试v京东方v你</div>
</div>
<div class="footer">删除</div>
</div>
css:
.page {
width: 100%;
overflow-y: scroll;
display: flex;
flex-direction: column;
height: 100vh;
}
.top {
flex: 1;
/* // 关键， 超出部分滚动 */
overflow-y: scroll;
}
.footer {
width: 343px;
line-height: 44px;
background: #ff5446;
margin: 0 auto;
font-size: 17px;
color: #fff;
text-align: center;
flex: 0;
}
2. header footer固定 中间滑动
html
<div class="wrap">
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
</div>
css
.wrap {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
}
.header,
.footer {
height: 40px;
line-height: 40px;
background-color: #D8D8D8;
text-align: center;
}
.main {
flex: 1;
width: 100%;
overflow: scroll;
}
头部固定：
使用vant van-sticky