介紹

如果你正在創(chuàng)建一個網(wǎng)頁，你可能經(jīng)常會想讓它的頁腳一直保持在最底部，無論中間的內(nèi)容有多少。那么，有什么方法能快速做到么？本期我們將介紹四種css方案來解決讓頁腳保持在底部位置這個問題。

正文

絕對定位

$ft-h:60px;
body {
  min-height: 100vh;
  position: relative;
  box-sizing: border-box;
  padding-bottom: $ft-h;
}
footer{
  height: $ft-h;
  width: 100%;
  position: absolute;
  bottom: 0;
  left:0;
}

關鍵點在于讓 footer 絕對定位置于最底部，而 body 則需要通過 padding-bottom 給其空出一段在 footer 高度的距離，并且 body 的高度必須是最小 100vh 代表可以占滿窗口高度，而且 body 還要 設置 box-sizing: border-box; 這樣不會產(chǎn)生高度溢出的問題。

這個雖然方案有一丟丟麻煩，但是兼容性會好些因為，核心是padding 和 absolute 這兩個屬性，這樣很早到瀏覽器都可以支持到。

彈性盒子

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
section{
  flex: 1;
}

首先還是 body 使用 min-height，確保伸展到屏幕的全高。然后，設置 flex-direction: column 讓其變成為堆疊的塊元素并保持整個文檔流可以正常顯示。最后，我們只要讓內(nèi)容區(qū)域的變成 flex: 1 ，為了讓內(nèi)容區(qū)域自動填充慢整個區(qū)域。這樣頁腳自然而然的就到了最下面。

這個雖然方案有都比較喜歡使用，因為兼容性 flex 目前來說還是比較不錯的，而且代碼量也很少，相對于也比較靈活。

網(wǎng)格布局

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

對你沒看錯，用了網(wǎng)格后代碼量更少了。首先依然是要讓 body 撐滿屏幕高度。緊接著，我們使用 grid-template-rows 來正確分隔內(nèi)容。這個方法使用了小數(shù)單元計算可用空間并將其分配到多行。因此，它將填充頁眉和頁腳之間的所有可用空間。與上面的 彈性盒子 相似，也是讓內(nèi)容區(qū)域自動填充滿整個區(qū)域高度，把頁腳堆到最下面。

這個方案雖為簡潔，但是吃虧在 grid 布局受很多手機低版本的瀏覽器限制，但是展望網(wǎng)格布局應該以后會是開發(fā)者最喜歡的方案。

calc計算

section{
  min-height: calc(100vh - 60px - 60px);
}

現(xiàn)在代碼更少了，只需要一句話就能做到了。眾所周知，calc() 此CSS函數(shù)是允許在聲明 CSS 屬性值時執(zhí)行一些計算的方法。我們只要是讓內(nèi)容區(qū)域的最小高度，是全屏高度然后去掉 header 和 footer 的高度，這就大功告成啦~

這個方案最簡潔，但是有兩個問題比較突出，就是以后如果在增加一些塊和更改布局時會稍微麻煩一點都要預先知道塊的高度，其次也是在手機低版本的兼容上，有時候也是不盡人意。

結語

其實與其說本期講的是讓頁腳保證在底部，更不如說是css基礎布局的實戰(zhàn)練習，在我們開發(fā)中，各種狀況都有可能出現(xiàn)，最后那種方案好與不好依然是要根據(jù)當前業(yè)務場景去靈活運用的。

 到此這篇關于css讓頁腳保持在底部位置的四種方案的文章就介紹到這了,更多相關css頁腳保持在底部位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

最新評論