期待效果：
- 有3行布局形真，header、content超全、footer咆霜；
- header高度固定邓馒；
- content高度不確定，內(nèi)容超過可視范圍蛾坯，出現(xiàn)滾動(dòng)條光酣；
- footer始終位于最底部，高度根據(jù)內(nèi)容自動(dòng)調(diào)整脉课；
實(shí)現(xiàn)思路：
- content和footer使用flex布局救军，是指flex方位為** column，對(duì)其方式為space-between**下翎，這樣footer始終吸底缤言；
- content 設(shè)置 ** overflow: auto;**不然會(huì)自動(dòng)撐大外層div高度；
- footer需要設(shè)置flex: none; 不然可能會(huì)被壓縮
實(shí)現(xiàn)代碼
// html
<div class="header">Header</div>
<div class="box">
<div class="content">
<div class="something">
111111
222222
33333333
</div>
</div>
<div class="footer">222</div>
</div>
// css
.header {
height:30px;
background: red;
}
.box {
background: green;
height: calc(100vh - 80px);
display: flex;
flex-direction: column;
justify-content: space-between;
color: white;
}
.something {
height: 1500px;
background: blue;
width: 100px;
}
.content {
overflow: auto;
}
.footer {
min-height: 120px;
background: orange;
flex: none;
}
實(shí)現(xiàn)效果
image.png
