介紹

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

正文

絕對(duì)定位

$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;
}

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

這個(gè)雖然方案有一丟丟麻煩，但是兼容性會(huì)好些因?yàn)?，核心?code>padding 和 absolute 這兩個(gè)屬性，這樣很早到瀏覽器都可以支持到。

彈性盒子

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

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

這個(gè)雖然方案有都比較喜歡使用，因?yàn)榧嫒菪?flex 目前來(lái)說(shuō)還是比較不錯(cuò)的，而且代碼量也很少，相對(duì)于也比較靈活。

網(wǎng)格布局

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

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

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

calc計(jì)算

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

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

這個(gè)方案最簡(jiǎn)潔，但是有兩個(gè)問(wèn)題比較突出，就是以后如果在增加一些塊和更改布局時(shí)會(huì)稍微麻煩一點(diǎn)都要預(yù)先知道塊的高度，其次也是在手機(jī)低版本的兼容上，有時(shí)候也是不盡人意。

結(jié)語(yǔ)

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

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

最新評(píng)論