Question

我正在努力实现以下设计：

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

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

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

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

这完全可以用于CSS吗？如果它使用HTMl5 / CSS3技术，我很高兴。

感谢您提供任何帮助！

托马斯

Answer 1

在我的脑海中，这样的东西应该在HTML4 / CSS2中起作用（未经测试）：

20％色谱柱，最小尺寸为200px

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

固定位置标题＆amp;页脚：

.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;}

有关缩放背景图片，请参阅此问题：Stretch and scale CSS background

2柱体，流体宽度，100％高度，固定头和＆amp;页脚

1 个答案: