保持頁腳在底部:Flexbox vs Grid
（給前端大學加星標，提升前端技能.）
作者：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.
這是一系列研究現代 CSS 解決方案的第一篇文章，我在過去13年多的時間里一直致力于前端開發(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).
多年來，我一直參考Matthew James Taylor的這篇文章，想找到一種方法，在不考慮內容長度的情況下，讓網頁頁腳保持在頁面的底部。這種方法依賴于設置一個明確的頁腳高度，在Flexbox之前這是一個不可伸縮的，非常好的解決方案。
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開發(fā)，你可能會困惑為什么這個問題仍然存在，但是仍然有可能發(fā)現你的頁腳漂浮起來:
login pages
blog/news articles (with no ads...)
nterstitial pages of a flow like confirming actions
product listing pages
calendar event details
登錄頁面
博客/新聞文章（無廣告...）
流程的插頁式頁面，例如確認動作
產品列表頁
日歷活動詳細信息
There are two ways to handle this with modern CSS: flexbox and grid.
使用現代CSS有兩種方法來處理這個問題：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.
這是演示，默認為flexbox方法。如果你打開Codepen，你可以將$method變量換成grid來查看這個備選方案。
Read on past the demo to learn about each method.
通過閱讀演示來了解每種方法。
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:
這種方法通過定義以下內容來實現：
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元素至少能撐滿屏幕的全部高度（最小高度為100vh）。如果內容很短(某些移動瀏覽器除外)，將不會觸發(fā)溢出，并且允許內容根據需要繼續(xù)撐滿高度。
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).
設置 flex-direction: 列在保留堆疊塊元素(假設 body 的直接子元素實際上都是塊元素)方面保留了正常文檔流的行為。
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)勢在于利用margin：自動行為。這個詭異的技巧會導致頁邊距填充對應方向上最近的同級上設置的項之間的任何空格。設置margin-top: auto可以有效地將頁腳推到屏幕底部。
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添加了一個輪廓，以演示在flexbox方法中main元素未填充高度。這就是為什么我們必須使用margin-top：auto技巧的原因。這對您來說不太重要，但如果需要，請參見網格方法，該方法可以拉伸主體以填充可用空間。
Grid Method
網格法
This method is achieved by setting
這種方法是通過設置以下參數實現的
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.
對于此方法，我們保留min-height: 100vh，但是我們隨后使用grid-template-rows來正確地分隔內容。
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.
這個方法的奇怪的技巧是使用特殊的網格單位fr。fr的意思是“fraction”，使用它要求瀏覽器計算出可用的 "fraction "空間，并將其分配到該列或行。在本例中，它填充了頁眉和頁腳之間的所有可用空間，這也解決了flexbox方法的“問題”。
Which is Better?
哪個更好?
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之后，你可能會有一瞬間認為它顯然更優(yōu)越。但是，如果在頁眉和頁腳之間添加更多元素，則需要更新模板(或者確保始終存在一個包裝元素，比如 div，以免影響任何嵌套的語義/層次結構)。
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 方法可以跨多個模板使用，這些模板在中間部分有多個塊元素——例如，一系列 < article > 元素而不是一個歸檔頁面的單個 < 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!
所以和所有的技術一樣，這取決于項目:)但是我們都同意有這些現代的CSS布局方法是令人驚奇的!
??愛心三連擊
點分享 點點贊 點在看
