两列和头部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; 
}