粘连 Footer 的 5 种方法 | CSS-Tricks
本文轉(zhuǎn)載自：http://www.zcfy.cc/article/491
文中對(duì)于“吸附”布局的實(shí)現(xiàn)非常巧妙，當(dāng)我第一次看到那個(gè)效果圖，第一時(shí)間也沒有想到好的實(shí)現(xiàn)方法。
一個(gè)簡短的歷史，如果你愿意那樣說的話。
粘連 footer 的目的是讓它“支撐”在瀏覽器窗口的底部。但不總是在底部，如果有足夠的內(nèi)容將頁面撐開，footer 可以被撐到網(wǎng)頁下方去。但是，如果頁面的內(nèi)容很短，粘連 footer 仍然會(huì)出現(xiàn)在瀏覽器窗口的底部。
在 wrapper 上用負(fù)的 margin-bottom
用一個(gè)元素將除了 footer 之外的其他內(nèi)容包起來。給它設(shè)一個(gè)負(fù)的 margin-bottom，讓它正好等于 footer 的高度。這是一個(gè)最基本的方法（例子）。
例子：用負(fù) margin 粘連 footer
<body><div class="wrapper">content<div class="push"></div></div><footer class="footer"></footer> </body> html, body {height: 100%;margin: 0; } .wrapper {min-height: 100%;/* Equal to height of footer *//* But also accounting for potential margin-bottom of last child */margin-bottom: -50px; } .footer, .push {height: 50px; }這個(gè)方法需要在內(nèi)容區(qū)域加一個(gè)額外的元素（.push?元素），這樣確保不會(huì)因?yàn)樨?fù) margin 將 footer 提升上來而覆蓋了任何實(shí)際內(nèi)容。.push?元素也最好不要有自己的 margin-bottom，如果有，那么它也得算在負(fù) margin 中，而這又會(huì)使得?push?的 height 和?.wrapper?的 margin-bottom 的數(shù)字不一樣，看起來也不是很好。
在 footer 上用負(fù)的 margin-top
用這個(gè)技術(shù)不需要一個(gè) push 元素，但是相應(yīng)地，在內(nèi)容外面需要額外再包一層元素來讓它產(chǎn)生對(duì)應(yīng)的 padding-bottom。這也是為了防止負(fù) margin 導(dǎo)致 footer 覆蓋任何實(shí)際內(nèi)容。
例子：?用負(fù) margin 粘連 footer 2
<body><div class="content"><div class="content-inside">content</div></div><footer class="footer"></footer> </body> html, body {height: 100%;margin: 0; } .content {min-height: 100%; } .content-inside {padding: 20px;padding-bottom: 50px; } .footer {height: 50px;margin-top: -50px; }這個(gè)技術(shù)和前一個(gè)一樣有個(gè)缺點(diǎn)，就是它們都需要添加額外的 HTML 元素。
通過 calc( ) 減少 wrapper 高度
有一個(gè)不需要添加額外元素的方法，那就是通過 calc( ) 調(diào)整 wrapper 的高度。這樣不需要任何附加的元素，只需要兩個(gè)元素并排共用 100% 高度。
例子：Sticky Footer with calc( );
<body><div class="content">content</div><footer class="footer"></footer> </body> .content {min-height: calc(100vh - 70px); } .footer {height: 50px; }注意我這里用 calc( ) 扣除了 70px，把 footer 固定為 50px。這是假設(shè)內(nèi)容中的最后一個(gè)元素有一個(gè) 20px 的 margin-bottom。這個(gè) margin-bottom 和 footer 的高度要加在一起從 viewport 高度中扣除。而且，我們?cè)谶@里還用了 viewport 單位（vh——譯者注），這是另外一個(gè)小技巧，因?yàn)槿绻?100% 作為 wrapper 的高度，那我們還得先把 body 的高度設(shè)為 100%。
使用 flexbox
上面三種技術(shù)的大問題是它們需要 footer 的高度固定。Web 設(shè)計(jì)中固定高度通常都不好。內(nèi)容可能改變。我們需要靈活性。固定高度通常要被亮紅燈。使用 flexbox 來實(shí)現(xiàn)粘連 footer?不僅不需要任何額外的元素，還可以支持 footer 可變高度。
例子：用 Flexbox 粘連 Footer
<body><div class="content">content</div><footer class="footer"></footer> </body> html {height: 100%; } body {min-height: 100%;display: flex;flex-direction: column; } .content {flex: 1; }你甚至可以添加一個(gè) header 到?.content?前面或者其他更多內(nèi)容到后面。使用 flexbox 的訣竅是：
- 設(shè)置?flex: 1?在你希望自動(dòng)填充窗口空間的子元素上（在我們的例子里是?.content?元素）。
- 或者，可以設(shè)置?margin-top:auto?來讓子元素盡可能遠(yuǎn)離它前面的元素（或者根據(jù)需要選擇任意一個(gè)方向的 margin）。（上面的?flex:1?也可以用?margin-bottom:auto，內(nèi)容垂直居中可以用margin:auto 0，flex 布局很奇妙吧——譯者注）
記得我們有一個(gè)關(guān)于一切 flexbox 相關(guān)內(nèi)容的完整的指南。
使用 grid
Grid 布局是一種更新的技術(shù)（目前支持它的瀏覽器比 flexbox 更少）。我們也有一個(gè)關(guān)于它的完整的指南。用它實(shí)現(xiàn)粘連 footer 也相當(dāng)容易。
例子：用 Grid 粘連 footer
<body><div class="content">content</div><footer class="footer"></footer> </body> html {height: 100%; } body {min-height: 100%;display: grid;grid-template-rows: 1fr auto; } .footer {grid-row-start: 2;grid-row-end: 3; }這個(gè)例子只能在 Chrome Canary 或者 Firefox 開發(fā)版上工作，并且可能在 Edge 下被降級(jí)到舊的 grid 布局版本。
總結(jié)
以上是生活随笔為你收集整理的粘连 Footer 的 5 种方法 | CSS-Tricks的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一小时让你Get到面试套路：记一次Jav
- 下一篇： Unity LeanTouch 点击按下