具有绝对位置的页脚不会粘在滚动条上

Question

我正在尝试制作一个会粘在页面底部的页脚，而不是将其粘在原始窗口的底部位置。当我滚动时，我最终会将页脚粘在页面中间。

我不想修复它并粘在页面上。

当我没有足够的内容滚动时，一切都很好。 （至少看起来是这样）

对应的HTML：

<footer class="footer_div">
  <div class="container">
    <p>Sam Sedighian - No rights reseved!</p>
  </div>
</footer>

对应的CSS：

.footer_div {
  background-image: url("../imgs/dark_dotted2.png");
  color: #818787;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 40px;
  padding-top: 10px;
  text-align: center;
}

它需要位于页面底部而不是粘性（固定），并且只有在滚动到页面底部时才可见。所以它应该适用于这两个例子：sedighian.github.io/blog/absolute_not_working.html 和 sedighian.github.io/blog/absolute_not_working2.html

Answer 1

这是一个非常微妙的错误。仔细阅读position: absolute documentation：

不要为元素留出空间。相反，将其定位在相对于其最近定位的祖先或包含块的指定位置。

footer 没有任何定位的祖先。注意the Bootstrap example,they explicitly declare position: relative on html.

此外，您需要添加一个与页脚高度相等的padding-bottom，以便为其保留空间。

试试：

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

body {
    padding-bottom: 40px;   
}