在任何情况下如何在页面底部添加页脚？

Posted 2023-03-21

【中文标题】在任何情况下如何在页面底部添加页脚？

【英文标题】：How to have a footer in the bottom of the page on any case?

【发布时间】：2020-09-05 16:34:35

【问题描述】：

我想在 html 页面的底部有一个固定的页脚，即使是 XS 和 SM 尺寸。

当我把它设为相对时，它取决于显示的内容，我希望它固定在底部。

有人可以帮我吗？

【问题讨论】：

这能回答你的问题吗？ Fixed footer in Bootstrap

我觉得这篇文章很有帮助。 css-tricks.com/couple-takes-sticky-footer第一张图片正好显示了你的问题。

【参考方案1】：

您可以使用以下样式：

position: fixed;
bottom: 0;
left: 0;
right: 0;

您当然必须根据您的具体情况对其进行调整。如果您有代码示例，我可以为您提供更具体的内容。

【讨论】：

是的，实际上当我传递给 XS 一个 SM 时，页脚在底部，但在正文的底部。所以我的页脚位于页面的中间......

@jozinho22 我没有看到这个，但这可能是与html 和body 高度定义相关的问题。虽然这些并没有真正影响position: fixed。

【参考方案2】：

这就是你获得粘性页脚的方式

body
min-height: 100vh;
flex-direction: column;  


footer
  margin-top:auto;