當(dāng)我們要設(shè)置網(wǎng)頁(yè)中的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>請(qǐng)撥打111</li>
</ul>
</footer>
</body>
方式一:
<style>
footer{
position:absolute;
bottom:0;
}
</style>
但是當(dāng)我們的內(nèi)容區(qū)塊過(guò)多超過(guò)一屏?xí)r,就會(huì)出現(xiàn)footer不會(huì)隨著內(nèi)容往后移(不再置底)的問(wèn)題
接下來(lái)的兩種方式就能解決當(dāng)內(nèi)容過(guò)多時(shí),footer永遠(yuǎn)都置底
方式二：使用calc()設(shè)置內(nèi)容高度
<style>
*{
margin:0;
padding:0;
}
/* 通過(guò)calc()函數(shù)讓內(nèi)容區(qū)塊自動(dòng)伸縮 */
.main{
min-height: calc(100vh - 80px);
}
footer{
height:50px;
}
</style>
上面的80px=30px+50px庐舟，是因?yàn)榧僭O(shè)內(nèi)容區(qū)塊和footer的間距為30px，footer的高度是50px. 只需min-height: calc(100vh - 80px)一句話姜钳，我們就可以計(jì)算出內(nèi)容區(qū)塊的自動(dòng)伸縮高度劈愚，從而讓footer置底
注意,calc()使用加減法時(shí)要當(dāng)心疫铜，記得在
+,-號(hào)的前后加一個(gè)空格镜硕。這樣做的原因是在未來(lái)我們?cè)赾alc()函數(shù)內(nèi)部可能會(huì)用到關(guān)鍵字,為了到時(shí)候能區(qū)別開(kāi)-是關(guān)鍵字的連字符還是運(yùn)算符減號(hào)
方式三：使用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è)置為一個(gè)大于0的值兴枯，比如flex:1血淌，實(shí)現(xiàn)了內(nèi)容區(qū)塊自動(dòng)伸展并占滿所有的可用空間
注意，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)時(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彈性盒子布局，僅用四行代碼匣摘，就實(shí)現(xiàn)了footer置底
每天都努力一點(diǎn)點(diǎn)
謝謝你看完
