このテーブルベースのレイアウトをCSSに変換するにはどうすればよいですか？

私はスクロールバーのない100％高さ/幅のテーブルベースのレイアウトを持っています。ヘッダー（赤色）はコンテンツに合わせて自動的に展開され、ピクセル数はわかりません。以下の液体表は、私が何を正確に示しているかを示しています。このテーブルベースのレイアウトをCSSに変換するにはどうすればよいですか？

<html> 
<body height=100%> 
<table height=100% width=100% padding=0> 
<tr height=1><td colspan=2 bgcolor=red>Fit<br/>to<br/>content<br/>height</td></tr> 
<tr><td bgcolor=blue width=66% valign=top>How can I do this with CSS?</td><td bgcolor=green valign=top> 
<div style="height:100%; width:100%; overflow:auto;"> 
This area can have content that overflows - needs an independent scrollbar.<br/> 
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/> 
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/> 
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/> 
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/> 
</div> 
</td></tr> 
</table> 
</body> 
</html>

CSSで同じレイアウトを実行し、一般的に使用されているブラウザで動作させるにはどうすればよいですか？

出典

2009-07-31 Andrew

私はそれをコピーして貼り付け、あなたはFirefox 3.5で望んでいないようです。緑色のサイドバーにはスクロールバーが必要ですが、ボディは正しくありませんか？ – Alsciende

はい、そうすべきです。私はFF3.5をまだこのマシンにインストールしていません。私はそれをする必要があります - 私に言ってくれてありがとう。 – Andrew

ヘッダーはあまりにも難しくはありません.2列の場合は、faux columnsを使用して、下まで色を伸ばす必要があります。

HTML：：

<div id="header">Fit<br/>to<br/>content<br/>height</div>

CSS：

#header { 
    background-color: red; 
    width: 100%; 
}

P.S.私はあなただけしたいと思うヘッダの

あなただけの私の目を滲出させた;）

出典

2009-07-31 08:47:00

これは私が尋ねた質問に答えるように見えますが、私の要求に正確に合うかどうかはわかりません。私はそれを試し、これを答えとして受け入れるか、質問を洗練します。ありがとう。 – Andrew

<html> 
<head> 
<style type="text/css"> 
#wrapper 
{ 
height: 100%; 
width: 100%; 
padding: 0; 
} 

#header 
{ 
float: left; 
width: 100%; 
background-color: red; 
} 

#main 
{ 
height: 100%; 
width: 100%; 
float: left; 
} 

#main-left 
{ 
    height: 100%; 
float: left; 
width: 66%; 
background-color: blue; 
} 
#main-right 
{ 
    height: 100%; 
float: left; 
width: 34%; 
background-color: green; 
} 
</style> 
</head> 
<body> 

<div id="wrapper"> 

<div id="header"> 
    Fit<br />to<br />content<br />height 
</div> 

<div id="main"> 

    <div id="main-left"> 
    How can I do this with CSS? 
    </div> 

    <div id="main-right"> 
    Tested in Chrome 2 and IE8 
    </div> 

</div> 

</div> 
</body> 
</html>

出典

2009-07-31 08:48:16 usoban

IE8とChrome2でこのソリューションを試しました。どちらのブラウザも右側にスクロールバーを表示します。右または下にはスクロールバーがありません。 – Andrew

コンテンツがブラウザーの表示可能領域を超えると問題が発生することは間違いありませんが、コンテンツの最後まで色が途切れることはありません。 –

サンプルに大きすぎるコンテンツを追加しました。コンテンツのオーバーフローの問題が発生した場合の動作方法を示しています。 – Andrew

このテーブルベースのレイアウトをCSSに変換するにはどうすればよいですか？

答えて

関連する問題