兩列和頭部CSS佈局問題

Question

我想讓我的第一個網站，我有一些與CSS的麻煩。 我想要一個兩點+報頭的佈局，完全佔據整個網站的屏幕空間

我想以下說明書：

• 頭高度屏幕的20％
• 左欄20％的寬度屏幕高度屏幕（剩餘空閒空間 ）
• 右列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; 
}