页脚底部定位问题答案

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