Css 粘性页脚问题

我试图创建一个粘性页脚从一个简单的看教程，我发现网上。在我尝试在我的内容div上增加一个宽度之前，这似乎是可行的，我不知道为什么

如果我给content div添加一个宽度，那么页脚与content div之间似乎不再有任何距离，因此，如果有大量内容，页脚会使内容变得模糊

我已经创建了这个JSFIDLE，但是它看起来不像在firefix或IE中看到的那么明显

有人知道为什么会发生这种情况吗？我该怎么做才能让一个具有固定宽度和自动边距的内容div居中，但如果几乎没有任何内容或内容量很大的话，仍然有一个一直粘在底部的页脚

下面是我的content 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;
            }

---

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

position: fixed;
clear: both;

---

这将为您提供一个与主要内容不重叠的粘性页脚（如果我正确获得了您想要执行的操作）。您可能会失去clear:这两个部分，但它可能对某些浏览器有所帮助…

至少在Chrome中，JSFIDLE对我来说没有问题。无论内容是否加宽，它看起来都一样。我甚至还加了一大堆字，页脚还是没有剪掉任何东西。因此，

填充

确实有效，至少在我的情况下是这样

然而，根据你在另一个答案上所说的，也许你可以将页脚上的

位置：绝对

更改为

位置：相对

（假设页脚下面没有放置任何东西……我猜不会，因为它是一个页脚）。它确保页脚放在内容之后，而不是放在内容上。但是要小心，并确保在许多不同的情况下（浏览器和设备）检查它

---

为了以防万一，我还将在内容上添加一个

页边空白底部
。
设置网页的背景颜色以匹配页脚和正文不是一个选项，我感谢迄今为止我得到的所有答案，但不幸的是，没有一个适合我

我不得不做我认为是一个黑客，它在内容上添加了比页脚高的div，这意味着页脚坐在这个div的顶部，而不是我的内容，在内容和页脚之间存在空间错觉：
<div style="height: 120px;"></div>
<div id="footer"><span style="color: red"> This is the footer section</span></div>


这是页脚部分
我查看了有内容宽度和无内容宽度的小提琴，与页脚和内容的关系似乎没有区别。你的页脚是绝对定位的，所以它不是一个粘性的页脚开始，它与你的内容宽度没有任何关系，它不是一个视觉的东西吗？从页脚删除框阴影和边框如果它作为网页查看，我可以看到，当我删除内容分区上的宽度时，页脚是正常的，它不会在内容分区上流血，模糊文本，如果我在其中添加宽度，它现在位于内容分区的顶部。嗨，对不起，可能我的解释不够清楚，我不希望页脚即使有内容也总是在底部，我想要的是页脚即使有很多内容也总是在页面底部，如果有很多内容，我不想让页脚遮住它。@Berimblo为什么要将页脚位置设置为绝对位置？@Huangism我将页脚位置设置为绝对位置，因为这是教程中的css，在有很多内容之前，页脚似乎工作正常，此时页脚会在内容上流血，直到我从content div中删除宽度。事实上，删除宽度只意味着它不再覆盖文本，问题是页脚似乎在content div中，即使它不是。几乎就好像它没有被向下推，而是填充底部。@berimbolo页脚重叠，因为您的页脚处于绝对位置（使其脱离正常流程）。如果有一个页脚，当有很多内容时，它位于底部，那么你不需要绝对。但是，如果你想让一个页脚位于底部，而没有内容，那么你需要绝对。只需在内容中添加更多填充。您需要填充页脚的高度+所需的内容填充，在您的情况下，填充180px