當你在布局網頁時，有可能會遇到類似下面的這種情況

broken_layout.png

導致這一問題的原因是頁面內容太少，無法將內容區域撐開，從而在 footer 下面留下一大塊空白。

本文將介紹一種現代化的方法，�確保 footer 始終處于頁面的底部。

解決方法

�解決該問題的最好方法是采用 flexbox——CSS3提供的一種先進布局模型，旨在建立具有適應性的布局。如果你對 flexbox 還不怎么熟悉，文章最后有一些擴展閱讀鏈接，可以幫助你了解 flexbox。

我們的演示頁面應該具備 Header、主體內容區域和 Footer，下面是該頁面的 HTML

...

...

...

為了啟用 flex模式，我們將 body 的 display 屬性設置為 flex, 然后將方向屬性設置為列, (默認是行，也就是橫向布局)。同時，將html 和 body 元素的高度設置為100%，使其充滿整個屏幕。

html{

height: 100%;

}

body{

display: flex;

flex-direction: column;

height: 100%;

}

現在，我們需要調整各個區域占用的頁面空間，我們將通過flex 屬性來達到這一目的，該屬性實際包含了三個屬性，分別是：

flex-grow：元素在同一容器中對可分配空間的分配比率，及擴展比率

flex-shrink：如果空間不足，元素的收縮比率

flex-basis：元素的伸縮基準值

我們希望 header 和footer 只占用他們應該占用的空間，將剩余的空間全部交給主體內容區域

header{

/* 我們希望 header 采用固定的高度，只占用必須的空間 */

/* 0 flex-grow, 0 flex-shrink, auto flex-basis */

flex: 0 0 auto;

}

.main-content{

/* 將 flex-grow 設置為1，該元素會占用全部可使用空間

而其他元素該屬性值為0，因此不會得到多余的空間*/

/* 1 flex-grow, 0 flex-shrink, auto flex-basis */

flex: 1 0 auto;

}

footer{

/* 和 header 一樣，footer 也采用固定高度*/

/* 0 flex-grow, 0 flex-shrink, auto flex-basis */

flex: 0 0 auto;

}

最終的效果如下圖所示。通過點擊中央的粉紅按鈕改變主體內容，footer 會始終顯示在頁面的最底部。

correct_layout-e1459357917514.png

結論

如你說見，如果是從零開始構建布局，flexbox 將會是你的得力助手。除了極少數的例外，所有的主流瀏覽器都支持 flexbox，�就 IE 來說，IE9以后的版本都是支持的。

下面是一些學習 flexbox 布局模型不錯的教程和速查表

fetalk_qrcode.jpg

總結

以上是生活随笔為你收集整理的html5自动把某个层放在屏幕底部,告诉你一个将 footer 保持在底部的最好方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。