javascript - 内容超出页面底部的页脚

Question

我一直在四处寻找，但找不到太多帮助。

我使用绝对定位方法将页脚放置在页面底部:

footer{
  position: absolute;
  bottom: 0;
  background-color: #000;
  color: #fff;
  min-height: 100px;
  padding:{
    top: 10px;
    bottom: 10px;
  }
  border: {
    top: solid 2px #fff;
  }
}

当我尝试将其推到页面底部时，无论页面高度如何，我仍然会遇到这样的行为:

我也尝试过将高度设置为 100%:

html, body{
  background-color: $background-color-primary;
  height: 100vh;
}

body{
  margin-bottom: 60px;
}

我不希望它被修复，因为这对网站来说是一种不受欢迎的行为，我只想一直到底部，无论主要内容的高度如何。

Answer 1

有点不清楚您希望页脚如何显示...

如果您希望将页脚固定在视口(viewport)底部，那么我建议使用 position:fixed;而不是position:absolute; 。

此外，您还需要设置 margin-bottom等于页脚的高度，以便页面内容不会隐藏在页脚下方。

如果您希望页脚位于内容下方，请进行以下更改:

• 删除 position:absolute;从页脚开始。
• 删除 height:100vh;来自html和body .
• 确保页脚为 display:block; .
• 确保主要内容的容器没有 position:absolute , position:fixed也不float .
• 确保页脚的 HTML 位于内容下方。