使用CSS的等高列和页脚?

一种方法是对列使用非常大的值 padding-bottom 和一个同样大的 消极的 价值观 margin-bottom . 如下所示:

#container {
    overflow: hidden;
}

#container .column {
    padding-bottom: 20010px;  /* X + padding-bottom */
    margin-bottom: -20000px;  /* X */
}

#footer {
    position: relative;
}

我所看到的方法的最佳描述是 "One True Layout" 文章对 Position is Everything . (不要忘记查看 potential problems 文章也是如此。)

如果侧边栏和主要内容都浮动,则将 clear: both; 在页脚的规则中应该意味着它总是被下推- see this two column layout tutorial on 456 Berea Street 了解更多详细信息。如果你的侧边栏是绝对定位的,那么你可能会有更多的乐趣, here's a good resource for other layouts .

唯一解决这个问题的方法是使用一些JS计算侧边栏和内容区域的高度,然后使它们相等。调用JS函数onload。如果你能找到更好的解决方案,请告诉我。

This 可能是你想要的。我使用了类似于您的布局,并使用了这个解决方案,经过一些修改,使它不仅遵守内容高度,而且遵守侧边栏高度。

还有另一个选择-它是跨浏览器,没有任何黑客-检查 equal height columns