【譯】粘連Footer的5種方法|CSS-Tricks_html/css_WEB-ITnose

一個(gè)簡短的歷史，如果你愿意那樣說的話。

粘連 footer 的目的是讓它“支撐”在瀏覽器窗口的底部。但不總是在底部，如果有足夠的內(nèi)容將頁面撐開，footer 可以被撐到網(wǎng)頁下方去。但是，如果頁面的內(nèi)容很短，粘連 footer 仍然會出現(xiàn)在瀏覽器窗口的底部。

在 wrapper 上用負(fù)的 margin-bottom

用一個(gè)元素將除了 footer 之外的其他內(nèi)容包起來。給它設(shè)一個(gè)負(fù)的 margin-bottom，讓它正好等于 footer 的高度。這是一個(gè)最基本的方法（ 例子 ）。

例子： 用負(fù) margin 粘連 footer

 content 

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 元素），這樣確保不會因?yàn)樨?fù) margin 將 footer 提升上來而覆蓋了任何實(shí)際內(nèi)容。 .push 元素也最好不要有自己的 margin-bottom，如果有，那么它也得算在負(fù) margin 中，而這又會使得 push 的 height 和 .wrapper 的 margin-bottom 的數(shù)字不一樣，看起來也不是很好。

在 footer 上用負(fù)的 margin-top

用 這個(gè) 技術(shù)不需要一個(gè) push 元素，但是相應(yīng)地，在內(nèi)容外面需要額外再包一層元素來讓它產(chǎn)生對應(yīng)的 padding-bottom。這也是為了防止負(fù) margin 導(dǎo)致 footer 覆蓋任何實(shí)際內(nèi)容。

例子： 用負(fù) margin 粘連 footer 2

 content 

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 元素。

通過 cacl() 減少 wrapper 高度

有一個(gè)不需要添加額外元素的 方法 ，那就是通過 cacl() 調(diào)整 wrapper 的高度。這樣不需要任何附加的元素，只需要兩個(gè)元素并排共用 100% 高度。

例子： Sticky Footer with calc();

 content 

.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 高度中扣除。而且，我們在這里還用了 viewport 單位（ vh ——譯者注），這是另外一個(gè)小技巧，能夠避免在讓 wrapper 高度為 100% 時(shí)還得先把 body 高度設(shè)為 100%。

There is flexbox

使用 flexbox

上面三種技術(shù)的大問題是它們需要 footer 的高度固定。Web 設(shè)計(jì)中固定高度通常都不好。內(nèi)容可能改變。我們需要靈活性。固定高度通常要被亮紅燈。 使用 flexbox 來實(shí)現(xiàn)粘連 footer 不僅不需要任何額外的元素，還可以支持 footer 可變高度。

例子： 用 Flexbox 粘連 Footer

 content 

html { height: 100%;}body { min-height: 100%; display: flex; flex-direction: column;}.content { flex: 1;}

你甚至可以添加一個(gè) header 到 .content 前面或者其他更多內(nèi)容到后面。使用 flexbox 的訣竅是：

記得我們有一個(gè)關(guān)于一切 flexbox 相關(guān)內(nèi)容的 完整的指南 。

使用 grid

Grid 布局是一種更新的技術(shù)（目前 支持它的瀏覽器比 flexbox 更少 ）。我們也有一個(gè)關(guān)于它的 完整的指南 。用它實(shí)現(xiàn)粘連 footer 也相當(dāng)容易。

例子： 用 Grid 粘連 footer

 content 

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 下被降級到舊的 grid 布局版本。

英文原文： https://css-tricks.com/couple-takes-sticky-footer/

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com