footer - 无法让页脚留在页面底部

Question

我正在使用二十个主题。

我不知道这是否重要，但为了让页脚一直延伸到页面之外（100%），我把它放在包装器 div 之外，所以而不是：

<wrapper>
    <main>
    </main>
    <footer>
    </footer>
</wrapper>

我是这样说的：

<wrapper>
    <main>
    </main>
</wrapper>
    <footer>
    </footer>

页脚的 css 如下所示：

#footer {
    height: 100px;
    background:#393939;
    font-size:12px;
    color:#777;
    margin:0;
    padding:20px;
    z-index:999;
    bottom:0;
    clear:both;
}

页脚现在直接位于所有内容的下方，所以如果页面内容太短，页脚不在页面底部，就像在这个页面上一样： http ://skiss.nu/hff/?page_id= 10

如果我添加“位置：绝对；” 页脚位于此页面的底部，但它覆盖了内容更多的页面。

Answer 1

您需要将自己的位置固定为“固定”。

#footer {
height: 100px;
background:#393939;
font-size:12px;
color:#777;
margin:0;
padding:20px;
z-index:999;
bottom:0;
clear:both;
position:fixed;
}

Answer 2

您可以像这样向包装器 div 添加最小高度：

wrapper {
    min-height: 600px;
}

这在所有屏幕尺寸上看起来都不是很棒，但它是完成工作的一种快速方法。