CSS Sticky Footer 幾種實現方式

2024-07-11 09:00:03

字體：大中小

來源：轉載

供稿：網友

什么是 “Sticky Footer”

所謂 “Sticky Footer”，并不是什么新的前端概念和技術，它指的就是一種網頁效果：如果頁面內容不足夠長時，頁腳固定在瀏覽器窗口的底部；如果內容足夠長時，頁腳固定在頁面的最底部。但如果網頁內容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。

先來看看下面的例子, 代碼如下

<div class="header">    頂部</div><div class="main">    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p></div><div class="footer">    <i class="fa fa-copyright" aria-hidden="true"></i>    <div>底部</div></div>

.header {    background-color: #3498DB;    height: 50px;    line-height: 50px;    text-align: center;    color: #fff;}.main {    overflow: auto;    box-sizing: border-box;}.footer {    background-color: #ECF0F1;    height: 50px;    line-height: 50px;    text-align: center;}

細心讀者應該發現問題了,底部 footer 位置會隨著主體內容高度變化自動變化,當主體內容小于視口的高度時, footer 并沒有黏貼在底部. 那么解決這樣問題尼?

negative margin

<div class="main">    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p>    <p>中間部分</p></div><div class="footer">    <i class="fa fa-copyright" aria-hidden="true"></i>    <div>底部</div></div>

html,body {    height: 100%;}.header{    background-color: #3498DB;    height: 50px;    line-height: 50px;    text-align: center;    color: #fff;    position: fixed;    width: 100%;}.main {    min-height: 100%;    overflow: auto;    box-sizing: border-box;    padding-bottom: 50px;    padding-top: 50px;    margin-bottom: -50px;}.footer {    background-color: #ECF0F1;    height: 50px;    line-height: 50px;    text-align: center;}

固定高度解決方案

使用如下屬性

min-height
calc
vh

calc() 是 CSS3引入的,讓你在聲明CSS屬性值時可以執行一些計算.

它可以用在一些數值場合; 詳細可以查閱這里MDN

vh(Viewport Height): 顧明思議,表示的是視口的高度.

詳細信息以及兼容可以查閱這里: caniuse

針對上面的代碼進行修改,如下

.main {    min-height: calc(100vh - 50px - 50px);}

這樣完成我們期望的,但是有個缺點就是每次我們都要去計算 header、footer 的高度.

這顯然不完美, 假如DOM結構層級多的話,需要計算的內容更多.

absolute

absolute相信大家熟悉不過了,這里就不在亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb