使用CSS的/ footer等高柱？

Question

我正在创建一个具有可变宽度侧边栏和内容区域以及页脚的业务应用程序。对于我的生活，我无法弄清楚如何使用CSS正确显示页脚，无论侧栏高度如何。以下是该问题的说明：

如果内容区域大于侧边栏，则页脚和侧边栏很好，但不是相反（faux columns技术似乎不适用于页脚，仅equal height with footer技术如果侧边栏较短，似乎有效。）

有什么建议吗？我在这里找到了一个只适用于IE6的答案，但没有其他只使用CSS。我很想让我的生活变得简单并且使用TABLE，但无论哪种方式，我都很想知道如何使用CSS（有点javascript不会受伤，但是w / o更好）。

Answer 1

一种技术是为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文章。）

Answer 2

如果您同时浮动了补充工具栏和主要内容，那么将clear: both;放入页脚规则应该意味着它总是被推下来 - see this two column layout tutorial on 456 Berea Street以获取更多详细信息。如果您的补充工具栏位于绝对位置，那么您可以获得更多乐趣，here's a good resource for other layouts。

Answer 3

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

Answer 4

This可能就是你要找的东西。我使用了与你类似的布局，我使用了这个解决方案，只做了一些修改，使其不仅要服从内容高度，还要服从侧边栏高度。

Answer 5

还有另一种选择 - 它是跨浏览器而且没有任何黑客 - 请检查equal height columns