后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 CSS-Grid 将页脚保持在底部
#gatsby-focus-wrapper，
#___盖茨比{
#gatsby-focus-wrapper 和 #___gatsby 是隐藏的 div，gatsby 将其注入到 html 和 body 标签之间的 DOM 中。
在项目进行到某个阶段，你可能会因为页脚悬停在页眉正下方而感到烦躁，因为还没有内容填满这个空间。此外，可能还会有一些非常短的页面（例如 404 错误），它们的长度可能不足以填满整个浏览器。
使用 CSS-Grid 将页脚保持在浏览器底部变得更容易了。可以使用一些 CSS 技巧、Flexbox 或 JS，但我认为 Grid 解决方案是最优雅、最简洁的。
请注意，截至撰写本文时，此方法仅支持现代浏览器。好消息是，此方法不会破坏旧版浏览器的任何功能。
HTML 结构如下：
<html>
<body>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
</body>
</html>
与一些实际项目相比，这可能稍微简化了一些。重要的是将主内容区域 (main) 和页脚 (footer) 保持在同一个父元素中。
html, body {
width: 100%;
height: 100%;
}
article {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
重点是“grid-template-rows”属性。在这里，我们告诉浏览器，我们希望“article”的第一个子元素的高度与其自然高度一致（“auto”）。第二个子元素的高度应该为fr，这意味着它会尽可能高，因为其中没有其他fr元素。第三个子元素的高度也与自然高度一致。
不要忘记将 html 和 body 元素设置为 100% 高度，否则您的网格容器将无法填满整个浏览器。
这是 CodePen 上的工作示例。
如果你还不知道的话：CSS-Grid 现在已支持所有现代浏览器。它是一种定义页面布局及其他功能的便捷方式。快去看看 Wes Bos 的免费课程吧。
补充：
您可以使用 Flexbox 实现同样的效果。如果您现在（2018 年 1 月）需要此功能，这将是一个更广泛支持的方式。请查看 Dominik Weber 的文章“使用 CSS Flexbox 将页脚保持在底部”
更新：
Firefox 52 支持网格布局，但存在一些 bug，尤其是在这个例子中。元素无法保持其自然高度。因此，如果您需要支持 Firefox 52，请使用 Flexbox 解决方案。