溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了CSS實(shí)現(xiàn)Footer置底的方法有哪些的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇CSS實(shí)現(xiàn)Footer置底的方法有哪些文章都會(huì)有所收獲，下面我們一起來看看吧。
頁腳置底（Sticky footer）就是讓網(wǎng)頁的footer部分始終在瀏覽器窗口的底部。當(dāng)網(wǎng)頁內(nèi)容足夠長以至超出瀏覽器可視高度時(shí)，頁腳會(huì)隨著內(nèi)容被推到網(wǎng)頁底部；但如果網(wǎng)頁內(nèi)容不夠長，置底的頁腳就會(huì)保持在瀏覽器窗口底部。
1、將內(nèi)容部分的底部外邊距設(shè)為負(fù)數(shù)
這是個(gè)比較主流的用法，把內(nèi)容部分最小高度設(shè)為100%，再利用內(nèi)容部分的負(fù)底部外邊距值來達(dá)到當(dāng)高度不滿時(shí)，頁腳保持在窗口底部，當(dāng)高度超出則隨之推出的效果。
<body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* 等于footer的高度 */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
這個(gè)方法需要容器里有額外的占位元素（如.push）
需要注意的是.wrapper的margin-bottom值需要和.footer的負(fù)的height值保持一致，這一點(diǎn)不太友好。
2、將頁腳的頂部外邊距設(shè)為負(fù)數(shù)
既然能在容器上使用負(fù)的margin bottom，那能否使用負(fù)margin top嗎？當(dāng)然可以。
給內(nèi)容外增加父元素，并讓內(nèi)容部分的底部內(nèi)邊距與頁腳高度的值相等。
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
</body>
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
不過這種方法和上一種一樣，都需要額外添加不必要的html元素。
3、使用calc()設(shè)置內(nèi)容高度
有一種方法不需要任何多余元素——使用CSS3新增的計(jì)算函數(shù)calc()
這樣元素間就不會(huì)有重疊發(fā)生，也不需要控制內(nèi)外邊距了——
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
.content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}
可能你會(huì)疑惑內(nèi)容高度calc()中為什么減去70px，而不是footer的高度50px，因?yàn)榧僭O(shè)倆元素有20px的間距，所以70px=50px+20px
不過，你不必在意這些——
4、使用flexbox彈性盒布局
以上三種方法的footer高度都是固定的，通常來說這不利于網(wǎng)頁布局：內(nèi)容會(huì)改變，它們都是彈性的，一旦內(nèi)容超出固定高度就會(huì)破壞布局。所以給footer使用flexbox吧，讓它的高度可以變大變小變漂亮——（≧∇≦）
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
你還可以在上面添加header或在下面添加更多元素?？蓮囊韵录记蛇x擇其一：
flex ： 1 使內(nèi)容（如：.content）高度可以自由伸縮
margin-top： auto
5、使用Grid網(wǎng)格布局
grid比flexbox還要新很多，并且更佳很簡潔
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
}
遺憾的是，網(wǎng)格布局（Grid layout）目前僅支持Chrome Canary和Firefox Developer Edition版本。
關(guān)于“CSS實(shí)現(xiàn)Footer置底的方法有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“CSS實(shí)現(xiàn)Footer置底的方法有哪些”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
