Question

我正在尝试使用我在网上找到的简单教程创建一个粘性页脚。这似乎工作正常，直到我尝试在我的内容div上加宽，我不知道为什么。

如果我在内容div中添加一个宽度，那么页脚似乎不再与内容div之间有任何距离，因此如果内容很多，它会使内容模糊不清。

我已经创建了这个jsfiddle，但它看起来并不像在firefix或IE中查看那样明显。

有没有人知道为什么会这样，我该怎么做才能让内容div具有固定的宽度和自动边距使其居中但是如果几乎没有任何内容或者仍然有一个始终坚持到底部的页脚或者大量的内容。

以下是我对内容div的css：

#content {
                margin-top: 15px;                   
                padding-bottom:100px; /* Height of the footer element */
                border-left: 1px solid #C9C9C9;
                border-right: 1px solid #C9C9C9;
                border-bottom: 2px solid #C9C9C9;                    
                box-shadow: -3px 0 3px -3px #333, 3px 0 3px -3px #333;                    
                width: 1024px; /* Here adding a width causes the footer to overlap */
                margin-left:auto;
                margin-right:auto;
                background-color: white;
                text-align: center;
                border: 1px solid red;
            }

http://jsfiddle.net/32M9Q/1/

Answer 1

至少在Chrome中，JSFiddle对我没有任何问题。无论是否在内容上加宽，它看起来都是一样的。我甚至添加了更多的单词，页脚仍然没有删除任何东西。所以padding确实有效，至少在我的情况下。

但是，根据您在其他答案中所说的内容，也许您可以将页脚上的position:absolute更改为position:relative（假设页脚下方没有任何内容......并且我猜不是因为它是一个页脚。它确保将页脚放在内容之后而不是放在其上。但要小心，并确保在许多不同的情况下（浏览器和设备）进行检查。

我还会在内容中加入margin-bottom，以防万一。

Answer 2

尝试将以下CSS规则添加到#footer元素：

position: fixed;
clear: both;

这将为您提供一个粘性页脚（如果我有你想要做的正确），它与主要内容不重叠。你可以放松一下：两者兼而有之，但它可能对某些浏览器有帮助......

Answer 3

设置我的网页的背景颜色以匹配页脚和身体不是一个选项，我很欣赏我到目前为止给出的所有答案，但不幸的是它们都不适合我。

我必须做我认为是一个黑客，它在内容之下加一个高于页脚的div，这意味着页脚位于这个div的顶部而不是我的内容给出了之间的空间错觉内容和页脚：

<div style="height: 120px;"></div>
<div id="footer"><span style="color: red"> This is the footer section</span></div>

粘性页脚问题

3 个答案: