30. 如何确保页脚始终位于页面底部? & 弹跳加载器

文章预览

如何确保页脚始终位于页面底部? & 弹跳加载器 如何确保页脚始终位于页面底部? 防止页脚在页面上浮动对于创建精美的网站很重要。内容 较少的页面 可能会遇到这个问题,但使用几行 CSS 就可以轻松解决。假设你的 HTML 类似于下面的代码片段,这里有两种现代方法来确保页脚始终位于页面底部: < body >    < main > main >    < footer > footer > body > 使用 Flexbox 你可以使用 flexbox 来确保页脚始终位于页面底部。方法是给 body 元素设置 min-height: 100vh 、 display: flex 和 flex-direction: column 。然后,给 footer 元素一个 margin-top: auto ,使其边距填充它与前一个兄弟元素之间的剩余空间。注意,这个技巧不会拉伸前一个兄弟元素,而是 将页脚推到页面底部 。 ………………………………