2柱体，流体宽度，100％高度，固定页眉和页脚

我想达到以下设计：2柱体，流体宽度，100％高度，固定页眉和页脚

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

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

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

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

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

感谢您的帮助！

托马斯

来源

2012-05-17 Thomas Huxley

唯一可能不可能的部分是内部图像以适合尺寸..您可以在图像上使用“min-width”和“min-height”使它们填充容器，但如果容器的尺寸较小，它不会缩小。 –

是的，它可以使用CSS和媒体查询。 –

关闭我的头顶，这样的事情应该工作（未测试）在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 */ 
}

固定位置页眉页脚&：

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

见日了这个问题e缩放背景图像：Stretch and scale CSS background

来源

2012-05-17 22:23:35 FluffyKitten

谢谢，但宁可不使用CSS表达式。我会继续玩弄它，并让你知道我如何继续！ –

@ThomasHuxley你只需要IE6的表达式，因为它不支持“最小宽度”。如果你不需要支持IE6，你可以忽略这个表达式（并且微软已经停止支持它，除非你知道你的访问者使用它，否则你可能足够安全） – FluffyKitten

2柱体，流体宽度，100％高度，固定页眉和页脚

回答

相关问题