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

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

1 个答案: