等高列布局、水平垂直居中與置頂頁腳(轉載)

等高列布局

在《八種建立等高列布局》一文中詳細介紹了八種建立等高列布局的不一樣方法。能夠說這些方法足以知足你的業務需求，固然其中有一些方法略爲繁瑣，也有時轉得人頭暈。在今天這種技術環境之下，若是的業務對IE低版本依賴性不是很是強的狀況之下，能夠考慮一些新的方法來實現。接下來我與你們一塊兒探討幾種新方法實現等高列布局。

Flexbox方式

Flexbox是一個強大而又神奇的CSS3模塊，並且到如今，也獲得衆開瀏覽器的支持。有了這個模塊，能夠幫助咱們作不少事情，並且較之之前的方案要更簡單，惟一蛋疼的是在一些老版本瀏覽器中沒法獲得友好支持。接下來的內容，咱們也將忽略這個兼容問題，而只是針對性的探討如何使用Flexbox實現等高列布局。

Flexbox如何使用，在這裏就不深刻了，若是您是第一次接觸Flexbox，那麼我建議您猛擊這裏先了解其使用方法。

HTML

來個簡單點的，兩列布局是Web佈局中常見的一種，其結構大體都是像這樣：

<div id="header"> <div class="container">Header ...</div> </div> <div id="page"> <div class="container"> <div class="aside">Sidebar ...</div> <div class="content">Main content ...</div> </div> </div> <div id="footer"> <div class="container">Footer ....</div> </div> 

很是常見的兩列布局。接下來纔是關鍵，使用Flexbox實現側欄.aside和主內容.contetn實現等高效果。

CSS

爲了更好的看出效果，咱們先給整個佈局添加一些基本樣式：

* { margin: 0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; } .container { width: 960px; margin: 0 auto; color: #fff; } #header .container { background-color: #f36; min-height: 50px; padding: 20px; margin-bottom: 10px; } #page .container { background-color: #cef; min-height: 300px; margin-bottom: 10px; } .aside { width: 220px; background-color: #36e; padding: 5px 15px; } .content { background-color: #66f; padding: 5px 15px; } #footer .container { background-color: #f36; padding: 20px; }

此時你將看到的效果是這樣的:demo

 

這樣的結局不是你們想看到的，來點精彩的，在上面代碼基礎上添加Flexbox功能：

#page .container { background-color: #cef; min-height: 300px; margin-bottom: 10px; display: flex; } .aside { width: 220px; background-color: #36e; padding: 5px 15px; margin-right: 20px; } .content { background-color: #66f; padding: 5px 15px; flex: 1; }

從上面代碼能夠看出，在兩列容器#page .container上添加了display:flex，在.content添加了自適應flex:1樣式，爲了讓兩列之間有一個間距，在.aside上添加了margin-right: 20px;。就這麼幾行代碼，輕鬆實現了等高列布局。

特別聲明：請使用Chrome瀏覽器訪問DEMO，若是須要兼容更多瀏覽器效果，請參考《一個完整的Flexbox指南》一文，添加對應的兼容代碼。

漸變方式

等高列布局，有一種簡單的方法就是根據列寬和其背景色製做一張背景圖，而後在Y軸方向重鋪。但這種方式在改變寬度和背景顏色的時候就很是的麻煩。那麼根據背景圖的思路，咱們能夠考慮使用CSS3的漸變屬性來製做相似於這樣的一張背景圖。

漸變Gradient是CSS3中新增的一個功能，若是你還未接觸過，建議經過《CSS3 Gradient》、《再說CSS3漸變——線性漸變》和《再說CSS3漸變——徑向漸變》瞭解CSS3的gradient的應用。

這時假設你已經對Gradient有必定的瞭解，接下來咱們主要要探討的是如何使用Gradient模擬出使用背景圖製做的等高佈局。

假設咱們的兩列布局，左側是220px,主內容是720px，二者間距是20px(容器寬度是960px)。咱們須要一個相似於下面的背景圖：

那麼使用Gradient實現相似一張這樣的背景，咱們須要採用多色漸變，如示例中所示，總共使用了三個顏色：

•  左側色爲#f36，從０點起到220px止
•  間隔色爲#fff，從221px起到240px止
•  主內容色爲#f63，從241px起到100%止

以下圖所示：

既然知道原理了，咱們來看看如何實現。一樣採用上例的結構，咱們經過CSS3的線性漸變來實現兩列等高佈局：

* { margin: 0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; } .container { width: 960px; margin: 0 auto; color: #fff; } #header .container { background-color: #f36; min-height: 50px; padding: 20px; margin-bottom: 10px; } #page .container { background-image: -webkit-linear-gradient(to right,#f36 0, #f36 220px, #fff 221px,#fff 240px,#f63 241px, #f63 100%); background-image: linear-gradient(to right,#f36 0, #f36 220px, #fff 221px,#fff 240px,#f63 241px, #f63 100%); margin-bottom: 10px; overflow: hidden; } .aside { width: 220px; float: left; margin-right: 20px; padding: 5px 15px; min-height: 200px; } .content { width: 720px; float: left; padding: 5px 15px; } #footer .container { background-color: #f36; padding: 20px; }

效果DEMO所示：

到此，你是否是以爲很是的完美呀。說實在的，若是你不考慮低版本，這是完美的解決方案。那咱們在此就是爲了擴展思路吧，終有一天，你的等高佈局能用上這種解決方案。而在此解決方案中最關鍵的是使用線性漸變：

#page .container { background-image: -webkit-linear-gradient(to right,#f36 0, #f36 220px, #fff 221px,#fff 240px,#f63 241px, #f63 100%); background-image: linear-gradient(to right,#f36 0, #f36 220px, #fff 221px,#fff 240px,#f63 241px, #f63 100%); margin-bottom: 10px; overflow: hidden; }

至因而何原理，你們仍是仔細搞懂漸變，一旦你搞懂漸變，這個對你來講就是小菜一碟。

僞類方式

CSS僞類:before和:after或者CSS僞元素::before和::after在實際中能夠幫助咱們作不少事情。

有關於:before和:after相關教程能夠閱讀《學習使用：before和：after僞元素》。

在這篇文章中，咱們一樣可使用僞類來實現等高列布局。這個思路主要來自於Kezz Bracey寫的一篇文章《Quick Tip: Solving the Equal Height Column Conundrum》。就拿這篇博文中的示例來講，先來看幾張從文中搬來的圖片，這幾張圖能幫助你們解惑，僞類是如何實現等高列布局：

特別聲明，以上三張圖來自於

上圖主要說明.wrap容器中包含三個子元素和其餘們對應的僞類。經過僞類設置背景色。使用這種方法有幾個關鍵點：

•  容器.wrap須要設置position:relative；
•  僞類:before或:after須要絕對定位，不一樣元素的位置調整對應的left或者right值；
•  背景顏色設置在僞類生成的內容上，而且經過top和bottom拉伸，導致他們等高。
•  給僞類設置z-index的值爲-1，讓其在內容底部。

根據上述，咱們來實戰一下。

HTML結構依照上例不動，咱們來看CSS的實現方法：

* { margin: 0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; } .container { width: 960px; margin: 0 auto; color: #fff; } #header .container { background-color: #f36; min-height: 50px; padding: 20px; margin-bottom: 10px; } #page .container { position: relative; overflow: hidden; margin-bottom: 15px; } .aside { width: 220px; float: left; margin-right: 20px; padding: 5px 15px; min-height: 200px; } .content { width: 720px; float: left; padding: 5px 15px; } .aside:before, .content:before{ content:""; position: absolute; top:0; bottom:0; z-index:-1; } .aside:before { left:0; width: 220px; background: #f63; } .content:before { width: 720px; background: #c6f; right:0; } #footer .container { background-color: #f36; padding: 20px; }

看着一大串代碼，是否有些暈，其實關鍵的就下面幾行代碼：

#page .container { position: relative; } .aside:before, .content:before{ content:""; position: absolute; top:0; bottom:0; z-index:-1; } .aside:before { left:0; width: 220px; background: #f63; } .content:before { width: 720px; background: #c6f; right:0; }

最後看看效果吧：

水平垂直居中

提及水平垂直居中你們常看到的是使用絕對定位與負margin的配合或者是inline-block配合vertical-align:middle等方法。固然還有其餘一些解決方案，好比說，在水平垂直居中系列中介紹了一些製做方案。但這些方案或多或少都存在一些侷限性。假設，要垂直水平居中的元素大小是未知的，你要使用絕對定位與負margin配合就難上加難。固然你會說，使用表格將解決我一切所需，的確是這樣，那麼除了這些方法，還有別的方案嗎？接下來咱們就針對這個自設問題，來一塊兒探討其餘幾種實現水平垂直居中的方案。

爲了更好的闡述後面的方案，咱們這裏有一個命題：讓未知大小容器（未知行數的文本）實現水平垂直居中。看到這樣的命題，有人或許會說神經病又來了，若是你也這麼認爲，就讓當是神病出現了吧。咱們不糾結這個，仍是看幾種解決方案吧。

Flexbox方式

什麼是Flexbox就不說了，對於讓Flexbox實現水平垂直居中能夠說是絕對的一流。假設我想讓一張圖片（圖片大小不知）在body中實現水平垂直居中。

HTML

<body> <img src="http://img0.bdstatic.com/img/image/shouye/mxangel.jpg" alt="" /> </body> 

結構很是簡單，body中有一張圖片。

CSS

咱們要作的是，如何使用Flexbox讓img在body中實現水平垂直居中。

*{ margin: 0; padding:0; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { height: 100%; } body { display: flex; align-items: center; justify-content: center; width: 100%;/*firefox下須要*/ }

代碼就這麼幾行，有一個關鍵之處，須要將html和body高度設置爲100%;而後只須要在body中配置樣式。此處使用了Flexbox中的居中屬性。至於他們原理，這裏就很少說了，感興趣的同窗能夠看看Flexbox相關的教程。

若是你想體驗一下效果，請點擊下圖：

在上面DEMO的基礎上，你調整瀏覽器窗口大小：

固然你隨意調整圖片大小也能讓其居中：

兼容性咱談不聊了，我們繼續。

transform與絕對定位方式

在當今天移動設備橫行天下的年代，給咱們前端人員製做頁面帶來無盡的煩惱，具體緣由，你們都懂的。那麼這裏咱們來模擬一個情形。有一個彈出層，我不知道他的大小有多大，我想讓他在各類設備中永遠水平居中。在下面示例中，咱們用一個Dive來看成是彈出窗吧（偷懶了，不想花太多時間去作這個彈出窗效果）。

回到咱們問題所在，在示例中有這樣的一個結構：

<div class="modal"> <div class="modal-header">彈出窗標題</div> <div class="modal-body">在當今天移動。。。</div> </div> 

結構不分析了。直接看CSS:

*{ margin: 0; padding:0; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { height: 100%; } .modal { border: 1px solid #bbb; border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.5); position:absolute; top:50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .modal-header { padding: 10px 20px; background: rgba(0,0,0,.25); color:#fff; } .modal-body{ padding: 20px; background: #fff; }

先來體驗一下效果吧：

把案例窗口調大：

其實實現這個效果並不複雜，在這裏咱們就要藉助了position和transform來實現，其關鍵代碼：

.modal { position:absolute; top:50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

從示例中，咱們能夠得知，咱們不知道頁面在什麼屏幕下瀏覽，也未對彈出窗.modal設置過任何大小值（width和height）。而這神奇的效果是藉助於絕對定位和負margin原理，只不過不一樣的是這裏採用了CSS3的transform中的translate，來了個負負得正的玩法。有興趣的同窗能夠深刻探究一下下喲。

僞類方式

前面也說過，僞類:after和:before能夠幫咱們作不少事，這一點不假，除了實現等高佈局以外，也能夠輔助咱們實現垂直水平居中。

不知道你們平時製做中是否有碰到多行文本水平垂直居中的效果。（解決方案你們都有）固然，這種效果對現一個常切頁面的頁面仔來講，並非難題，其餘的解決方案我就不說了，咱們來探討一個使用CSS僞類的方案。

你們或許還記得使用display:inline-block配合一個空標籤<i></i>的方式，其實這個方案也和這個同樣，只是咱們藉助:after或:before之類的將空標籤<i>替代掉了。而其餘的並無變化，例如：

<body> <div>在當今天移動設備橫行天下的年代...。</div> </body> 

其CSS樣式以下：

*{ margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; } html, body { height:100%; } div { display:inline-block; vertical-align: middle; width: 99.5%; } body:after { content:""; display: inline-block; vertical-align: middle; height: 100%; width: 0px; }

其效果如Demo所示。

置頂頁腳（Sticky Footer）

有時候在製做頁面時，當內容不足一屏顯示的時候，頁腳會跟隨在內容後面，而這樣的效果直接影響頁面的美觀。爲了不這種現象，須要將頁腳置頂，以下圖所示：

注：上圖來自於GALEN GIDMAN的《Responsive, Flexible-Height Sticky Footers in CSS》一文。

實現上圖的效果，在《如何將頁腳固定在頁面底部》一文中介紹了四種實現方法。其實除了這四種方法，還有其餘的一些方法，接下來要和你們一塊兒探討新的解決方案。

模擬表格方式

首先要跟你們探討的是經過display的table和table-cell屬性來模擬表格的形式，從而實現頁腳置頂效果。

HTML

<div class="wrapper"> <div id="header"> <div class="inner">Header...</div> </div> <div id="page"> <div id="sidebar">Sidebar...</div> <div id="content">content</div> </div> <div id="footer"> <div class="inner">Footer...</div> </div> </div> 

結構就不探討了。接來看CSS。

CSS

*{ margin:0; padding:0; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { height: 100%; } .wrapper { table-layout: fixed; width: 960px; margin: 0 auto; display: table; height: 100%; color: #fff; } .wrapper > div { display: table-row; height: 1px; } #page { height: auto; } .inner { padding: 10px 20px; min-height: 50px; background: #f36; } #sidebar { width: 220px; background: #63f; float: left; padding: 10px 20px; } #content { width: 720px; background:#f33; float:right; padding: 10px 20px; } #header .inner { margin-bottom: 10px; }

前面也說過了，使用的是display來模擬表格的方式。而整個代碼中最關鍵的部分是：

html, body { height: 100%; } .wrapper { table-layout: fixed; width: 960px; margin: 0 auto; display: table; height: 100%; color: #fff; } .wrapper > div { display: table-row; height: 1px; } #page { height: auto; }

效果以下所示：

固然，這個也存在兼容性的問題，不過你使用現代碼瀏覽器訪問應該是沒有問題的（人太懶了，沒作兼容測試）。不過你要感興趣的話，能夠閱讀Torben寫的《Sticky CSS footers: The flexible way》，裏面介紹的比實詳細。

Flexbox方式

轉來轉去又轉到Flexbox上面了，一樣的Flexbox也能夠實現頁腳置頂的效果。這樣更能彰顯出Flexbox在CSS的強大。終有一天，Flexbox將會成爲前端人員的最大福利。別的不說了，咱們來看如何實現纔是關鍵。

HTML

<div id="header"> <div class="container">Header...</div> </div> <div id="page"> <div class="container"> <div id="sidebar">Sidebar...</div> <div id="content">Content...</div> </div> </div> <div id="footer"> <div class="container">Footer...</div> </div> 

CSS

*{ margin:0; padding:0; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body{ height: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; } #page { flex: 1; } .container { width: 960px; margin: 0 auto; color:#fff; overflow:hidden; } #sidebar { width: 220px; float: left; background:#3ef; padding: 10px 20px; } #content { width: 720px; float: right; background: #a32; padding:10px 20px; } #header .container { background:#f35; padding: 10px 20px; margin-bottom: 15px; } #footer .container { background: #c2c; padding: 10px 20px; }

效果以下：

實現整個效果最關鍵的代碼其實就那麼幾行：

html, body{ height: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; } #page { flex: 1; }

是否是比想象中的要簡單，是否是更以爲Flexbox更實用了。這裏只是簡單介紹瞭如何實現，若是你想了解當中的原委，建議閱讀Flexbox相關的教程，或者閱讀Emil Björklund寫的教程《Sticky footers, flexbox and IE10》。

Sass方式

在Compass中提供了一個@mixin sticky-footer來實現頁腳置頂的效果。不過這個@mixin sticky-footer對其結構有必定的要求：

HTML

<div class="wrapper"> <div id="layout"> <div id="header">Header....</div> <div id="sidebar">Sidebar...</div> <div id="content">Content</div> <div id='layout_footer'></div> </div> <div id="footer">Footer...</div> </div> 

簡單的看看@mixin sticky-footer是如何定義的吧：

SCSS

@mixin sticky-footer($footer-height, $root-selector: unquote("#root"), $root-footer-selector: unquote("#root_footer"), $footer-selector: unquote("#footer")) { html, body { height: 100%; } #{$root-selector} { clear: both; min-height: 100%; height: auto !important; height: 100%; margin-bottom: -$footer-height; #{$root-footer-selector} { height: $footer-height; } } #{$footer-selector} { clear: both; position: relative; height: $footer-height; } } 

原理很簡單，在@mixin sticky-footer中使用的是如何將頁腳固定在頁面底部介紹的原理。只不過在Sass中使用了變量，方便維護與調用。具體這個Sass是什麼怎麼回事，我想不少接觸過Sass的同窗都能看懂。若是你想深刻了解這個@mixin是怎麼來的，能夠點擊這裏閱讀。

在實際中，只須要這樣調用：

@include sticky-footer(72px, "#layout", "#layout_footer", "#footer"); .wrapper { height: 100%; width: 960px; margin-left: auto; margin-right:auto; #header { background: #f36; height: 72px; margin-bottom: 20px; } #footer { background: #f36; } #sidebar { width: 220px; float: left; background: #c3e; } #content { background: #cfc; width: 720px; float: right; } } 

編譯出來的CSS:

html, body { height: 100%; } #layout { clear: both; min-height: 100%; height: auto !important; height: 100%; margin-bottom: -72px; } #layout #layout_footer { height: 72px; } #footer { clear: both; position: relative; height: 72px; } .wrapper { height: 100%; width: 960px; margin-left: auto; margin-right: auto; } .wrapper #header { background: #f36; height: 72px; margin-bottom: 20px; } .wrapper #footer { background: #f36; } .wrapper #sidebar { width: 220px; float: left; background: #c3e; } .wrapper #content { background: #cfc; width: 720px; float: right; }

效果以下所示：

總結

若是有你耐性跟着看到這裏，我想你也很累了。其實在Web製做中實現等高列布局、垂直水平居中和置頂頁腳甚至任何其餘效果都不是難事，並且也有多種方案。或許看到最後，有人會說，你這是東西都不兼容。不少時候咱們就是束縛在這些兼容性呀之類上面。咱們應該儘可能的去擴展本身的思惟，讓更簡單更好的方法實現咱們須要的效果。就如文章中Flexbox屬性，他既可讓你實現等高列布局，也能讓你實現垂直水平居中，並且還能讓你實現置頂頁腳效果。固然還有其餘的方法可能沒被我發現，若是你有更好的方案但願能一塊兒分享。由於咱們沒必要糾結兼容，儘可能大膽去想，去創造新的方法。最後但願這篇文章對你們有所幫助。

如需轉載，煩請註明出處：http://www.w3cplus.com/css/pure-css-create-equal-height-column-layout-and-certical-horizontal-centers-and-sticky-footer.html