Html 两列和标题css布局问题

我正试图建立我的第一个网站，我有一些麻烦与css。 我想要一个两栏+标题布局，充分占据整个网站的屏幕空间

我想要以下规格：

• 收割台高度屏幕的20%
• 左栏20%宽屏幕和80% 高度屏幕（剩余的自由屏幕） 空间）
• 右栏80宽屏幕和80 高度屏幕（剩余的自由屏幕） 空间）

我也希望部门之间不要重叠。 如果您使用%指定宽度和高度，我不知道这是否可行，但我希望如此：）。我希望有人能帮助我。我将非常感激

---

提前谢谢。

我不认为动态高度是头球的常见高度，但如果这确实是您想要的，那么这应该可以：

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

---

如果这是你的第一个网站，我不建议这样做。你应该假设你会在不同的屏幕尺寸上吸引访问者，而这种固定的100%高度布局将是一个问题。我从12年以上构建HTML网站的经验中告诉你这一点。如果你有很好的理由，尽管去吧，只是一个友好的警告。

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;
}