當(dāng)我們要設(shè)置網(wǎng)頁中的footer置底（sticky footer），我們可以這樣辦
body元素內(nèi)的結(jié)構(gòu)代碼如下
<body>
<div class="main">
<ul>
<li>啦啦啦啦</li>
<li>啦啦啦啦</li>
<li>啦啦啦啦</li>
</ul>
</div>
<footer>
<ul>
<li>聯(lián)系電話</li>
<li>請撥打111</li>
</ul>
</footer>
</body>
方式一:
<style>
footer{
position:absolute;
bottom:0;
}
</style>
但是當(dāng)我們的內(nèi)容區(qū)塊過多超過一屏?xí)r,就會出現(xiàn)footer不會隨著內(nèi)容往后移(不再置底)的問題
接下來的兩種方式就能解決當(dāng)內(nèi)容過多時,footer永遠(yuǎn)都置底
方式二：使用calc()設(shè)置內(nèi)容高度
<style>
*{
margin:0;
padding:0;
}
/* 通過calc()函數(shù)讓內(nèi)容區(qū)塊自動伸縮 */
.main{
min-height: calc(100vh - 80px);
}
footer{
height:50px;
}
</style>
上面的80px=30px+50px，是因為假設(shè)內(nèi)容區(qū)塊和footer的間距為30px，footer的高度是50px. 只需min-height: calc(100vh - 80px)一句話，我們就可以計算出內(nèi)容區(qū)塊的自動伸縮高度，從而讓footer置底
注意,calc()使用加減法時要當(dāng)心，記得在
+,-號的前后加一個空格。這樣做的原因是在未來我們在calc()函數(shù)內(nèi)部可能會用到關(guān)鍵字,為了到時候能區(qū)別開-是關(guān)鍵字的連字符還是運算符減號
方式三：使用Flexbox彈性盒子布局
<style>
*{
margin:0;
padding:0;
}
footer ul{
list-style-type: none;
}
/*Flexbox彈性盒子，靈活解決*/
body{
display:flex;
flex-flow:column;
min-height:100vh;//100%;
}
.main{
flex:1;
}
</style>
其中，把flex設(shè)置為一個大于0的值，比如flex:1，實現(xiàn)了內(nèi)容區(qū)塊自動伸展并占滿所有的可用空間
注意，響應(yīng)式網(wǎng)頁設(shè)計時，
-
vh,vw跟著顯示窗口（視圖）的寬度或高度，而不是父元素的寬度或高度 -
vw:viewport width，1vw相當(dāng)于顯示窗口寬度的1%
vh:viewport height，1vh相當(dāng)于顯示窗口高度的1% - 兼容性：IE9+，chrome/firefox/safari/opera支持，[iOS]safari 8+支持，[Androidbrowser4.4+支持，chrome for android39支持
利用Flexbox彈性盒子布局，僅用四行代碼，就實現(xiàn)了footer置底
每天都努力一點點
謝謝你看完
