0

私は次のデザインを達成しようとしています：

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

左と右の列の幅はパーセンテージになりますが、理想的には最小幅が固定されています。ヘッダーとフッターは、それぞれウィンドウの上部と下部に固定されています。

各列には、高さまたは幅（どちらか大きい方）に合わせて拡大縮小された背景画像もあります。

現在、私はJavascriptを使用して、デザインの幅といくつかの高さを実現しています。しかし、私の質問は次のとおりです。

これは完全にCSSで可能ですか？HTMl5/CSS3テクニックを使用していると嬉しいです。

可能な限りの支援に感謝します！

トーマス

4

1 に答える 1

1

頭のてっぺんから、HTML4 / CSS2では次のようなものが機能するはずです（テストされていません）。

最小サイズ200pxの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背景のストレッチとスケーリング

于 2012-05-17T22:23:35.330 に答える