需求:
縱向三欄布局:頭部舀寓、主體琳疏、尾部
1.當(dāng)不出現(xiàn)滾動條的時候頭部和尾部固定在頭和底側(cè)宇姚，主體撐開剩余高度
2.當(dāng)出現(xiàn)滾動條的時候尾部跟在主體后面被撐下去
昌跌。
實現(xiàn)目標(biāo)：
實現(xiàn)代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三欄縱向布局</title>
<style>
html{
background: silver;
height: 100%;
}
body{
margin:0;
height: 100%;
}
#wrap{
display: flex;
flex-direction: column;
height: 100%;
}
header,footer{
flex:0 0 100px;
}
header{
background: red;
}
footer{
background: blue;
}
.main{
flex:1 0 auto;
background: orange;
}
</style>
</head>
<body>
<div id="wrap">
<header>
我是頭部啊
</header>
<div class="main">
我是主體频蛔，我最牛逼,我高度能自適應(yīng)灵迫，我能把footer帶跑偏
改變我的內(nèi)容，我高度就自適應(yīng)了
</div>
<footer>我是尾部</footer>
</div>
</body>
</html>
程序說明:
- 現(xiàn)將
html和body以及主體div元素的高度設(shè)置成100%;讓高度撐滿真?zhèn)€屏幕; - 將
主體div元素的display設(shè)置成flex,然后flex-direction屬性設(shè)置成column晦溪； - 將
footer和header的flex屬性設(shè)置成0 0 100px,表明不管是否有剩余空間瀑粥，還是剩余空間不足，我的高度都固定在100px三圆； - 將
主體div的flex屬性設(shè)置成1 0 auto,當(dāng)最后一個屬性值是auto的時候表明他的主軸寬度取決于第一個屬性flex-grow,也就是有剩余空間的時候狞换，占滿剩余空間；中間設(shè)置成0表明舟肉，剩余空間不夠的時候主軸寬度也不壓縮修噪。 - 大功告成，改變主體
div的高度吧路媚！
注意:
這是一個flex布局的實戰(zhàn)黄琼；如果不懂flex布局，請看
一個完整的Flexbox指南
理解Flexbox：你需要知道的一切
