html - 页脚不粘在底部

Question

我的页脚粘在我博客整个页面的底部时遇到了问题。我遇到了两个问题。首先，如果我使用 position:absolute，页脚会上升到博客主页的中间位置。如果我不管它，它会粘在底部，但会上升到整个博客页面的中间。页脚是我经常遇到的问题。

这是我当前的页脚 CSS 样式

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

这是页面 http://pixelogicblog.tumblr.com/post/41025998534/tes-post 的链接

Answer 1

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

http://ryanfait.com/sticky-footer/

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

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

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