CSS-页面底部的位置页脚[重复]

Question

我正在尝试将页脚放在页面底部，但不粘。当没有足够的内容覆盖屏幕高度时，我会遇到问题，然后页脚不在底部。我试图在 CSS 中这样设置它：

body {
  position: relative;
  margin: 0;
  padding-bottom: 8rem;
  min-height: 100%;
  overflow-x: hidden;
}

footer {
  position: absolute;
  display: flex;
  align-items: center;
  height: 4rem;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $gray;
}

只有当有足够的内容时，此页脚才会出现在页面底部。但是，当没有足够的内容时，它就在底部之上。这是示例：

Here 是小提琴。

当我添加到 css 文件时，就像答案中建议的那样：

html, body {
  height: 100%;
}

然后，我对有很多内容的页面有问题，然后页脚在页面加载时位于底部，但是当我开始向下滚动时，它会随着内容上升，如图所示：

Answer 1

默认情况下，正文根据内部内容采用高度。只需为此添加以下 CSS

html, body {
    height: 100%;
}

html, body {
  height: 100%;
}
body {
  position: relative;
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
}

footer {
  position: absolute;
  display: flex;
  align-items: center;
  height: 4rem;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $gray;
  background: red;
}

<footer>Footer Container</footer>

Answer 2

这可能与显示属性有关：尝试将其添加到页脚 css 中：

display: block;

这样你的页脚css就变成了：

footer {
  position: absolute;
  display: block;
  align-items: center;
  height: 4rem;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $gray;
}

如果你不想去掉 display: flex;然后尝试将其包装在任何父 div 中，然后应用 display 属性。

Answer 3

在页脚 css 块中将位置值更改为相对值。可能是因为绝对你遇到了这个问题。如果我错了，请纠正我。