后端开发教程 - Java、Spring Boot 实战 - msg200.com
如何使页脚固定在网页底部。
问题
解决方案
问题
如果您是 Web 开发新手，并且之前创建过一些 HTML 页面，那么您可能会遇到这样的情况：发现页脚不在页面底部，并且底部有空白，因为内容不多。 这里有一些简单的 HTML 代码，它产生了我们想要的结果。
<body>
<header>
<h1>This is Header.</h1>
</header>
<article>
<h1>This is main content.</h1>
</article>
<footer>
<h1>This is Footer.</h1>
</footer>
</body>
正如你所见，内容不多，所以我的页脚不在页面底部。严格来说，它应该在页面底部，但我们的页面不够长。
解决方案
设定身高
body {
min-height: 100vh;
}
我们可以将主体最小高度设置为 100vh，这将使我们的页面至少与屏幕高度一样长，但这并不能解决我们的问题。
设置页脚顶部边距
footer {
margin-top: ???px;
}
我们可以在页脚元素上设置 margin-top，这样我们的页脚就会停留在页面的底部，但是当我们有多个页面并且每个页面的内容长度不同时，我们必须在每个页面上逐一设置适当的边距。
使用 Flexbox
使用 CSS 中的 Flexbox，我们可以按照以下步骤轻松修复它。
- 首先将 body 的最小高度设置为 100vh
min-height: 100vh;。。 - 将主体显示设置为 flex
display: flex;，并将 flex-direction 设置为 columnflex-direction: column;。 - 选择页脚元素（您想要粘贴到底部的任何元素）并将顶部边距设置为自动
margin-top: auto;。
你的 CSS 看起来应该像这样。
body{
min-height: 100vh;
display: flex;
flex-direction: column;
}
footer{
margin-top: auto;
}
这个问题应该得到解决。
css-trick.com 上有一篇关于 flexbox 的精彩文章，可以了解更多信息。https ://css-tricks.com/snippets/css/a-guide-to-flexbox/
奖励：内容垂直居中对齐
当内容不多，无法填满整个屏幕高度（例如简单的登录表单）时，您可能需要将内容垂直居中对齐。
为此，只需从页脚移除顶部边距，并将margin: auto 0;主要内容（在我的情况下是文章元素）的顶部和底部边距设置为自动，或者margin: auto;将其在两个方向（垂直和水平）居中，即可使内容居中对齐。
你的 CSS 看起来应该像这样。
body{
min-height: 100vh;
display: flex;
flex-direction: column;
}
article {
margin: auto 0;
}