项目中常用到的布局 flex

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

巴特西

项目中常用到的布局 flex

最新文章

热门文章