页脚不会到页面底部？

Question

我在http://puppetweb.ca/play/有一个页脚，您看到左侧的类别列表比实际的浏览器窗口长。我想让页脚连接到页面底部而不是窗口，但我似乎无法弄清楚它？有什么帮助吗？

谢谢！

Answer 1

为页脚提供position:static; CSS属性和clear:both; CSS属性：

#footer {
    position:static;
    clear:both;
}

由于默认定位是静态的，您还可以删除所有与位置相关的属性：

/* play, line 432 */
#footer {
    background: none repeat scroll 0 0 #272433;
/*    bottom: 0; /* REMOVED */
    color: #FFFFFF;
    height: 40px;
    margin: 0 auto;
/*    position: absolute; /* REMOVED */
    text-align: center;
    width: 92%;
    clear:both; /* ADDED... could probably also be `clear:left` */
}

问题出现是因为文档中的大多数元素都是左浮动的。但浮动元素是outside the normal flow：

有关详细信息，请参阅w3c's Visual Formatting Model。

Answer 2

在检查#footer元素的CSS属性时，我看到了

margin: 0 auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

尝试删除margin-top属性。 CSS尝试做的是在顶部和底部分配值0，将元素拉入页面中间。

Answer 3

减小'grid_10'的宽度并将它们设置为向左浮动。从页脚中删除固定的位置并设置'clear：both'，使其不会在两个grid_10周围浮动