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