页脚底部定位问题

Posted 2023-03-21

【中文标题】页脚底部定位问题

【英文标题】：Bottom of the page footer positioning issue

【发布时间】：2020-01-02 03:52:16

【问题描述】：

我很难弄清楚如何让我的页脚贴在屏幕底部，即使页面小于屏幕。

www.test-domain.sk

我猜这与容器长度有关，但老实说我完全不确定。

任何帮助将不胜感激。 :)

【参考方案1】：

假设您正在寻找类似的东西，但如果不是，请更具体。就像发布你已经拥有的代码一样。

footer 
position: fixed;
bottom: 0;

【讨论】：

#colophon color: #fff; position: relative; #colophon .site-info background-color: #212120; color: #fff; padding: 30px 0; line-height: 1; text-align: center; position: absolute; bottom: 0; width: 100%; 如果您查看代码和主页，您会发现问题所在。基本上，如果页面比屏幕长，我似乎做得对。但是，当页面短于查看它的屏幕时，页面会提前结束。这可能不是页脚问题，而是网站长度问题？

好的，我明白你现在在说什么了。我通常将所有东西都包装在一个容器中，除了控制屏幕上的元素之外别无他用。示例： 和所有其他元素都在这些标签内。在 css 中，我将容器高度设置为自动。我还看到其他设置 viewheight 为 99 或 100 以及其他一些方法。我还按照上面显示的方式设置了页脚。这是另一种方式：medium.com/@zerox/…

【参考方案2】：

这个概念被称为粘性页脚。 Mozilla 开发者网络有一个页面 here 说明了一些实现它的方法。在您的 www.test-domain.sk 页面示例中，我相信您可以添加以下 css 以使您的页脚粘在视口（屏幕）的底部。

html min-height:100%)
body 100vh
div#page min-height:100vh; display:grid; grid-template-rows: auto 1fr auto

【讨论】：

感谢您的帮助，natt，但我认为这不是页脚问题。这可能是一个容器问题，我不确定要改变什么才能让它工作:)

你是对的......它总是涉及一个最小高度为 100% 的包装容器元素。如果您设置以下 css 属性，我想您会得到您想要的。在你的 html 元素上，min-height:100%。在你的身体元素上：min-height: 100vh。在您的 div#page 元素上，min-height:100vh; display:grid; grid-template-rows: auto 1fr auto.

谢谢一百万，纳特。这是我缺少的这部分代码，不知道如何编写以及在哪里编写：div#page element, min-height:100vh;显示：网格；网格模板行：自动 1fr 自动

不客气！我更新了答案以在评论中包含信息。如果您觉得它有帮助，您可以将其标记为已接受，以便发现您的问题的任何人都可以更轻松地看到它是如何回答的。谢谢！