CSS - 三个可滚动的等高主内容列（流体高度）和粘滞/始终可见的页脚

Question

我几乎查看了Google和Google上的所有帖子，似乎无法找到我的CSS布局问题的答案“3个等高的列，带有'真正'粘性页脚”，并且布局要求如下：

1. Top Header部分，其中包含一行用于下拉菜单选项，另一行用于工具栏按钮。

2. 主要内容部分，有3个等高的列。中间列将具有液体宽度，左列和右列将具有固定宽度。所有3列都具有流体/可变高度，如果列中的内容多于列中可用的可见内容区域，则EACH COLUMN将自动显示/使用自己的滚动条。换句话说，如果任何列具有长内容，则列不应该按下它们下面的“粘性”页脚部分，而是显示/使用滚动条以供用户滚动内容。

3. 页脚部分（粘性/固定），无论主内容部分中任何3列中的内容长度如何，都必须始终在窗口/视口底部可见。页脚不应被其上方的任何3列向下推，并且必须非常“粘”并始终在视口中可见。

我真的花了几周时间寻找答案，但我所看到的关于“（三个）具有粘性页脚的等高列”的所有解决方案都不会阻止“主要内容”部分列“推”页脚如果任何内容列中有很长的内容，请将其删除。

我真的希望有人可以帮忙解决这个问题。提前谢谢！

Answer 1

你是说这样的意思吗？请参阅小提琴：http://jsfiddle.net/NGLN/R6F5q/2/。

在IE7，IE8，IE9，Opera 11，FF 4，Chrome 12，SafariWin 5的Win7上测试。