内容在页面底部超过页脚

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

有点不清楚你希望页脚如何展示......

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

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

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

• 从页脚中删除position:absolute;。
• 从height:100vh;和html移除body。
• 确保页脚为display:block;。
• 确保主要内容的容器没有position:absolute，position:fixed或float。
• 确保页脚的HTML位于您的内容下方。