兩列和標題css布局問題

Question

我正在嘗試建立我的第一個網站，而CSS遇到了一些麻煩。 我想要兩欄+頁眉布局，完全占據整個網站的屏幕空間

我想要以下規格：

• 標題20％的高度屏幕
• 左欄20％寬度的屏幕和80高度的屏幕（剩余的可用空間）
• 右欄80寬度屏幕和80高度屏幕（剩余可用空間）

我也希望div彼此不重疊。 我不知道如果使用％來指定寬度和高度是否可行，但我希望如此:)。 我希望有人能幫助我。 我會非常感激。

提前致謝。

Answer 1

我認為標題的動態高度不是很常見，但是如果這確實是您想要的，那么應該可以使用：

<div id="header">
</div>
<div id="content">
   <div id="left">
   </div>
   <div id="right">
   </div>
</div>

和CSS

html, body {
   height:100%; /* important for some browsers */
} 
#header {
   height:20%;
   width:100%;
} 
#content {
   height:80%;
   width:100%;
   float:left;
}
#left {
   width:20%;
   float:left;
}
#right {
   width:80%;
   float:left;
}