将页脚保留在网站的底部。 （不是pos：固定）

Question

在我的work2 Website上，当页面中没有足够的内容时，我的页面中的页脚停留在底部时出现问题。我已经google了，搜索了youtube csstricks等。 但总有相同的解决方案＆＃34 ;; 但不是我的页面。现在我来这里寻求帮助。

我想要的是this。 我真的很感激一个很好的解决方案。

你的呐喊。 麦克

Answer 1

您只需从链接中实现代码即可。关键是：

• 固定页脚高度，并将bottom: 0绝对定位在相对定位的元素内
• 内容底部填充等于页脚高度，以便在需要时将其向下推

因此，对于您的网站，您需要添加以下内容：

html {
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
}

footer {
  position: absolute;
  bottom: 0;
  height: 35px;
  width: 100%;
}

.content {
  padding-bottom: 60px;
}

只需将其附加到您的style.css文件即可在您的网站上进行测试。

Answer 2

将您的页脚移到正文中，否则无效的html。您还可以使用flex来简单地拉伸内容以填充屏幕上剩余的空间：

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
#content {
    flex: 1;
}

为什么要使用这种方法？简单，页脚不需要这样的特定高度，如果需要，它可以在高度上变化。

Answer 3

如果您按照您提供的示例进行操作，您将看到html和body标记的height属性都设置为100％，而包装div的最小高度为100％并设置为relative。

这允许示例中的页脚div绝对位于包装器div的底部，这也恰好是页面的底部。

如果您有Chrome，请打开DOM检查器并按顺序选择html或body标签（您的选择），包装器div和页脚div，然后您就可以继续操作。