如何將此基於表格的佈局轉換爲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 2009-07-31 09:37:02

是的，它應該。我還沒有在這臺機器上安裝FF3.5。我需要這樣做 - 謝謝你告訴我。 – Andrew 2009-08-01 12:42:03

標題不應太困難，對於兩列，我認爲您需要使用faux columns以使顏色一直延伸到底部。

對於標頭，我想你會只想：

HTML：

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

CSS：

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

附：你只是讓我的眼睛流血;）

來源

2009-07-31 08:47:00

這看起來像回答了我問的問題，但我不確定它會完全符合我的需求。我會測試它，並接受這個答案或改進問題。謝謝。 – Andrew 2009-07-31 08:57:39

<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

如何將此基於表格的佈局轉換爲CSS？

回答

相關問題