页脚不会流到页面底部

Question

页面顶部显示的黄色页脚块应该像页脚一样流到内容的底部。

这是#footer的CSS：

#footer {
    background-color: #2F3B47;
    padding: 20px;
    height: 180px;
    float: none;
    clear: both;
}

我需要解决方案像“粘性页脚”一样工作，以便它流向内容块的底部，而不管内容div的高度。感谢您的任何提示或帮助！

Answer 1

喜欢这个吗？

    position: fixed;
    left: 0;
    bottom: 0;

Answer 2

问题是你的包装器没有相关的高度，所以虽然内容填充了div，但它们不是填写 div。

您可以使用的一种方法是设置最小高度，这会将页脚向下推。

.wrapper {
min-height:900px;
}

但是，当您的内容超出最小高度时，您的问题仍会存在。一个答案是确保所有物品都保存在DIV中。因此，如果您的.swf为500x500，请将其嵌入500x500 div中，这样，包装内容将确保您的页脚与内容底部保持固定距离

Answer 3

它没有移动到底部，因为您已经完全定位了所有内容。看起来通过脚本编写你已经在#content和其他各种div上攻击了一个高度，但是对于#wrapper你没有这样做，因此#wrapper的计算高度为0用于计算流量中#footer的位置。

你需要重新修改你是怎么做的，即。使用浮动而不是定位，或者您需要找到一种正确定位页脚的方法，这可以通过将相同的脚本应用于您对其他#wrapper进行的div来完成，使用{ {1}}作为另一张海报建议或在封面内移动页脚并使用绝对定位。

就我个人而言，我会如何改变你的做法。 ABS定位有其用途，但很少布局在这些用途中包含的整个页面： - ）

Answer 4

您应该查看http://www.cssstickyfooter.com/

简而言之，你必须有一个分为两个步骤的结构（内容和页脚）。

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>

页脚CSS看起来：

#footer {
position: relative;
margin-top: -150px; 
height: 150px;
clear:both;
} 

完整的代码非常小，位于网站上。

Answer 5

请参阅“Felipe Schenone”@ link

的答案

还将页脚“margin-bottom”设置为0。

它就像一个魅力。