我的页脚在整个博客页面的底部都出现问题。我遇到两个问题。首先，如果我使用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
【问题讨论】：
查看使用 CSS 的粘性页脚解决方案：
http://ryanfait.com/sticky-footer/
position: absolute 的页脚仅位于页面一半的原因是您没有在 body 和 html 元素上设置最小高度。没有它，body 只会占用与它的内容一样多的空间 - 然后页脚与底部对齐，而不是与窗口的底部对齐。
尝试将其添加到您的 CSS 中，使其至少占据窗口的高度：
html, body {
min-height: 100%;
}
【讨论】：
<header> 元素。该元素仅用于页眉，但您将其用于不在页脚中的整个页面。
你见过吗？
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
跨浏览器（IE6+ 也是）且易于理解。
巧合的是，您当前的页脚没有出现在页面底部，因为它的位置设置为relative，将其位置设置为absolute，它将位于页面底部（只要页面不超过视口）。相对定位仅设置元素相对于正常位置的位置，例如，如果您在 footer 元素上设置 bottom: -10px，那么它看起来会比原本的位置低 10 个像素（希望我说得通那里！）
如果您绝对定位某些东西，它绝对定位到 body 标签，或者位置设置为 relative 的下一个最近的父级（无论如何我都理解）
【讨论】：
container 的内容，然后给它以下规则：min-height: 100%; position: relative; 然后给你的 header 元素 140px 底部填充，然后更改min-height 到 height 用于 html 和 body 元素
header 元素中在语义上非常不正确......你 header元素应该只包含所述文档的标题，您应该将主要内容包装在 div 中
将位置设置为绝对
position:absolute;
【讨论】：
需要注意的是，除了static（默认值）之外的任何定位都会将其从文档流中移除。我解决这个问题的方法是在正文内容中添加margin-bottom，等于#Footer 的高度。这样做可以确保页脚后面始终有一个空白空间，等于它的高度，防止它与内容重叠。使用absolute 和fixed 会导致内容重叠。
【讨论】：
如果你想把页脚贴在底部，你可以在header、main content和footer上使用带有viewheight单位的min-height。
例子：
<header style="min-height: 10vh">...</header>
<div id="main-content" style="min-height: 85vh">...</div>
<footer style="min-height: 5vh">...</footer>
这样，如果您没有将所有视图高度用于您的内容，页脚仍将停留在底部。这是我发现将页脚粘贴在底部的最佳方法。
希望对少数人有所帮助。
【讨论】：