保持頁(yè)腳在底部:Flexbox vs Grid
（給前端大學(xué)加星標(biāo)，提升前端技能.）
作者：Stephanie Eckles
https://moderncss.dev/keep-the-footer-at-the-bottom-flexbox-vs-grid/
This is the first post in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend developer.
這是一系列研究現(xiàn)代 CSS 解決方案的第一篇文章，我在過(guò)去13年多的時(shí)間里一直致力于前端開(kāi)發(fā)。
For many years, I constantly referred to this article by Matthew James Taylor for a method to keep a webpage footer at the bottom of the page regardless of the main content length. This method relied on setting an explicit footer height, which is not scalable but a very good solution BF (Before Flexbox).
多年來(lái)，我一直參考Matthew James Taylor的這篇文章，想找到一種方法，在不考慮內(nèi)容長(zhǎng)度的情況下，讓網(wǎng)頁(yè)頁(yè)腳保持在頁(yè)面的底部。這種方法依賴(lài)于設(shè)置一個(gè)明確的頁(yè)腳高度，在Flexbox之前這是一個(gè)不可伸縮的，非常好的解決方案。
If you mostly deal with SPA development, you may be confused about why this problem is still around, but it's still a possibility to find your footer floating up for:
如果您主要處理SPA開(kāi)發(fā)，你可能會(huì)困惑為什么這個(gè)問(wèn)題仍然存在，但是仍然有可能發(fā)現(xiàn)你的頁(yè)腳漂浮起來(lái):
login pages
blog/news articles (with no ads...)
nterstitial pages of a flow like confirming actions
product listing pages
calendar event details
登錄頁(yè)面
博客/新聞文章（無(wú)廣告...）
流程的插頁(yè)式頁(yè)面，例如確認(rèn)動(dòng)作
產(chǎn)品列表頁(yè)
日歷活動(dòng)詳細(xì)信息
There are two ways to handle this with modern CSS: flexbox and grid.
使用現(xiàn)代CSS有兩種方法來(lái)處理這個(gè)問(wèn)題：flexbox和grid。
Here's the demo, defaulted to the flexbox method. If you open the full Codepen, you can swap the $method variable to grid to view that alternative.
這是演示，默認(rèn)為flexbox方法。如果你打開(kāi)Codepen，你可以將$method變量換成grid來(lái)查看這個(gè)備選方案。
Read on past the demo to learn about each method.
通過(guò)閱讀演示來(lái)了解每種方法。
Hello World
Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.
? ACME
// Options: flexbox | grid
$method: flexbox;
$color: rebeccapurple;
* {
box-sizing: border-box;
}
body {
font-family: "Baloo 2", sans-serif;
min-height: 100vh;
@if($method == "flexbox") {
// Flexbox method
display: flex;
flex-direction: column;
} @else{
// Grid method
display: grid;
grid-template-rows: auto1frauto;
}
}
@if($method == "flexbox") {
footer {
margin-top: auto;
}
}
header,
footer {
display: grid;
place-items: center;
background-color: $color;
color: #fff;
}
main {
padding: 1rem;
max-width: 80ch;
margin: 0auto;
outline: 2px dashed grey;
}
h1 {
font-size: 4rem;
}
p {
font-size: 1.125rem;
line-height: 1.5;
}
Flexbox Method
Flexbox方法
This method is accomplished by defining:
這種方法通過(guò)定義以下內(nèi)容來(lái)實(shí)現(xiàn)：
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
// Optional
main {
margin: 0auto;
// or: align-self: center
max-width: 80ch;
}
How it Works
它是如何工作的
First, we ensure the body element will stretch to at least the full height of the screen with min-height: 100vh. This will not trigger overflow if content is short (exception: certain mobile browsers) and it will allow content to continue stretching the height as needed.
首先，我們確保body元素至少能撐滿(mǎn)屏幕的全部高度（最小高度為100vh）。如果內(nèi)容很短(某些移動(dòng)瀏覽器除外)，將不會(huì)觸發(fā)溢出，并且允許內(nèi)容根據(jù)需要繼續(xù)撐滿(mǎn)高度。
Setting flex-direction: column keeps the behavior of normal document flow in terms of retaining stacked block-elements (which assumes direct children of body are all indeed block elements).
設(shè)置 flex-direction: 列在保留堆疊塊元素(假設(shè) body 的直接子元素實(shí)際上都是塊元素)方面保留了正常文檔流的行為。
The advantage of flexbox is in leveraging the margin: auto behavior. This one weird trick will cause the margin to fill any space between the item it is set on its nearest sibling in the corresponding direction. Setting margin-top: auto effectively pushes the footer to the bottom of the screen.
flexbox的優(yōu)勢(shì)在于利用margin：自動(dòng)行為。這個(gè)詭異的技巧會(huì)導(dǎo)致頁(yè)邊距填充對(duì)應(yīng)方向上最近的同級(jí)上設(shè)置的項(xiàng)之間的任何空格。設(shè)置margin-top: auto可以有效地將頁(yè)腳推到屏幕底部。
Gotcha
陷阱
In the demo, I've added an outline to main to demonstrate that in the flexbox method the main element doesn't fill the height. Which is why we have to use the margin-top: auto trick. This is not likely to matter to you, but if it does, see the grid method which stretches the main to fill the available space.
在演示中，我向main添加了一個(gè)輪廓，以演示在flexbox方法中main元素未填充高度。這就是為什么我們必須使用margin-top：auto技巧的原因。這對(duì)您來(lái)說(shuō)不太重要，但如果需要，請(qǐng)參見(jiàn)網(wǎng)格方法，該方法可以拉伸主體以填充可用空間。
Grid Method
網(wǎng)格法
This method is achieved by setting
這種方法是通過(guò)設(shè)置以下參數(shù)實(shí)現(xiàn)的
body {
min-height: 100vh;
display: grid;
grid-template-rows: auto1frauto;
}
// Optional
main {
margin: 0auto;
max-width: 80ch;
}
How it Works
它是如何工作的
We retain the min-height: 100vh for this method, but we then use of grid-template-rows to space things correctly.
對(duì)于此方法，我們保留min-height: 100vh，但是我們隨后使用grid-template-rows來(lái)正確地分隔內(nèi)容。
This method's weird trick is using the special grid unit fr. The fr means "fraction" and using it requests that the browser computes the available "fraction" of space that is left to distribute to that column or row. In this case, it fills all available space between the header and footer, which also solves the "gotcha" from the flexbox method.
這個(gè)方法的奇怪的技巧是使用特殊的網(wǎng)格單位fr。fr的意思是“fraction”，使用它要求瀏覽器計(jì)算出可用的 "fraction "空間，并將其分配到該列或行。在本例中，它填充了頁(yè)眉和頁(yè)腳之間的所有可用空間，這也解決了flexbox方法的“問(wèn)題”。
Which is Better?
哪個(gè)更好?
After seeing grid, you may have a moment of thinking it's clearly superior. However, if you add more elements between the header and footer you need to update your template (or ensure there's always a wrapping element such as a div to not affect any nested semantics/hierarchy).
看完grid之后，你可能會(huì)有一瞬間認(rèn)為它顯然更優(yōu)越。但是，如果在頁(yè)眉和頁(yè)腳之間添加更多元素，則需要更新模板(或者確保始終存在一個(gè)包裝元素，比如 div，以免影響任何嵌套的語(yǔ)義/層次結(jié)構(gòu))。
On the other hand, the flexbox method is usable across various templates with multiple block elements in the midsection - for example, a series of elements instead of a single for an archive page.
另一方面，flexbox 方法可以跨多個(gè)模板使用，這些模板在中間部分有多個(gè)塊元素——例如，一系列 < article > 元素而不是一個(gè)歸檔頁(yè)面的單個(gè) < main > 元素。
So as with all techniques, it depends on the project :) But we can all agree it's amazing to have these modern CSS layout methods!
所以和所有的技術(shù)一樣，這取決于項(xiàng)目:)但是我們都同意有這些現(xiàn)代的CSS布局方法是令人驚奇的!
??愛(ài)心三連擊
點(diǎn)分享 點(diǎn)點(diǎn)贊 點(diǎn)在看
