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%;
}

＆＃13;

＆＃13;

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;
}

＆＃13;

<footer>Footer Container</footer>

＆＃13;

＆＃13;

＆＃13;

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块中将位置值更改为相对值。可能是因为绝对是你遇到了这个问题。如果我错了，请纠正我。