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

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文档:

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

footer没有任何定位的祖先.请注意,在Bootstrap示例中,它们明确声明position: relative了html.

此外,您还需要添加padding-bottom与页脚高度等效的内容,以便为其保留空间.

尝试:

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

body {
    padding-bottom: 40px;   
}