共计 1388 个字符，预计需要花费 4 分钟才能阅读完成。
download：Node.js 工程师养成打算【某课】完结内置文档资料
用 Flexbox 和 Grid 使网页页脚保持在页面的底部
如果你次要是处理 SPA 开发，你可能会困惑为什么这个问题仍然存在，但它仍然有可能找到你的页脚沉没起来的原因：
登录页面
博客 / 新闻文章（没有广告 …)
流程的间歇性页面，如确认口头
产品列表页
日历事件的细节
有两种方法可能用古代 CSS 来处理：flexbox 和 grid。
这里是演示，默认为 flexbox 方法。如果你打开完整的 Codepen，你可能将 $method 变量换成 grid，以查看该代替打算。
持续浏览演示，了解每种方法。
Flexbox 方法 #
这种方法是通过定义来实现的。
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
/ Optional /
main {
margin: 0 auto;
/ or: align-self: center /
max-width: 80ch;
}
复制代码
它是如何工作的 #
首先，咱们确保 body 元素将至多拉伸到屏幕的全副高度，min-height: 100vh。如果内容较短，这将不会触发溢出（例外：某些移动阅读器），它将容许内容根据需要持续拉伸高度。
设置 flex-direction: column，可能在保留重叠的块元素方面保持失常文档流的行为（假设 body 的间接子元素确实都是块元素）。
Flexbox 的劣势在于利用了 margin: auto 的行为。这个怪异的技巧将导致边距填补它所设置的我的项目和它在相应方向上最近的兄弟姐妹之间的任何空间。设置 margin-top: auto，可能无效地将页脚推到屏幕的底部。
骗局 #
在演示中，我在 main 中增加了一个 outline，以证实在 flexbox 方法中，main 元素并没有填补高度。这就是为什么咱们必须使用 margin-top: auto 的技巧。这对你来说不可能有什么影响，但如果有的话，请看网格方法，它可能将 main，以填补可用空间。
网格方法 #
这种方法是通过设置实现的:
body {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
/ Optional /
main {
margin: 0 auto;
max-width: 80ch;
}
复制代码
它是如何工作的 #
咱们为这种方法保留了 min-height: 100vh，但咱们随后使用了 grid-template-rows，以正确划分空间。
这种方法的怪招是使用非凡的网格单位 fr。fr 意义是 “ 分数 ”，使用它申请阅读器计算出可用的 “ 分数 “ 空间，以调配给该列或行。在这种情况下，它填补了页眉和页脚之间的所有可用空间，这也解决了 flexbox 方法的 “ 陷阱 ”。
哪个更好？#
看到 grid 之后，你可能会有一霎时感觉它显然更胜一筹。然而，如果你在页眉和页脚之间增加更多的元素，你需要更新你的模板（或者确保总是有一个包装元素，如 div，以不影响任何嵌套语义 / 档次）。
另一方面，flexbox 方法可用于两头部分有多个块状元素的各种模板 – 例如，一系列的 <article> 元素，而不是繁多的 <main>，用于存档页面。
因此，与所有技术一样，这取决于我的项目 :)然而，咱们都可能批准，具备这些古代的 CSS 布局方法是很了不起的!