页脚不粘在底部

Question

我的页脚无法粘在博客整个页面的底部。我遇到两个问题。首先，如果我使用position:absolute页脚，则会上升到博客主页的中间位置。如果我不理会它，它会粘在底部，但会上升到博客整个页面的中间。页脚是我一直遇到的麻烦。

这是我当前的页脚 CSS 样式

footer {
text-align: left;
background-color: #f4f4f4;
padding-top: 40px;
padding-bottom: 40px;
z-index: 1;
bottom:0;
width:100%;
}

Answer 1

查看使用 CSS 的粘性页脚解决方案：

页脚仅位于页面中间的原因position: absolute是您没有在 body 和 html 元素上设置最小高度。如果没有这个，正文只会占用与内容一样多的空间 - 然后页脚与该底部对齐，而不是与窗口的底部对齐。

尝试将其添加到 CSS 中，使其至少占据窗口的高度：

html, body {
    min-height: 100%;
}