jquery - 2 柱体，流体宽度，100% 高度，固定页眉和页脚

Question

我正在尝试实现以下设计：

https://www.dropbox.com/s/2y4qfxhn6noupap/Scr​​een%20shot%202012-05-17%20at%203.18.00%20PM.png

左列和右列将具有百分比宽度，但理想情况下是固定的最小宽度。页眉和页脚分别固定在窗口的顶部和底部。

每列上还有一个背景图像，它被缩放以适应高度或宽度（以较大者为准）。

目前我正在使用 Javascript 来实现我的设计宽度和一些高度：但我的问题是：

这在完全 CSS 中是可能的吗？如果它使用 HTMl5/CSS3 技术，我很高兴。

感谢您提供任何可能的帮助！

托马斯

Answer 1

在我的脑海中，这样的事情应该在 HTML4/CSS2 中工作（未经测试）：

最小尺寸为 200 像素的 20% 列

.col {
    width: 20%; 
    min-width: 200px;
    width:expression(document.body.clientWidth < 200? "200": "20%"); /* for IE6 only, as it doesn't support min-width */
}

固定位置页眉和页脚：

.header { position: absolute; top: 0px; left: 0px; width: 100%; height: 40px; background: #000000;}
.footer { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 40px; background: #000000;}

有关缩放背景图像，请参阅此问题：拉伸和缩放 CSS 背景