如何制作带标题和左侧栏的页面？

Question

我想制作一个这样的网页:

|----------------------------|
|            header          |
|----------------------------|
|  L  |                      |
|  e  |                      |
|  f  |                      |
|  t  |                      |
|     |                      |
|  S  |   Content Area       |
|  i  |                      |
|  d  |                      |
|  e  |                      |
|  b  |                      |
|  a  |                      |
|  r  |                      |
|----------------------------|

标题有一个固定的高度,但它的宽度应该是动态的.左侧边栏应具有固定宽度但动态高度.对于内容区域,高度和宽度都是动态的.当用户缩放浏览器时,不应出现滚动条(未设置溢出:隐藏;隐藏它).

我试着写这样的代码:

<div class="top">
    TOP
</div>
<div class="left">
    LEFT
</div>
<div class="main">
    MAIN
</div>

用CSS:

.top {
    width: 100%;
    height: 92px;
}
.left {
    width: 178px;
    height: 100%;
    float:left;
}
.main {
    float: left;
    height: 100%;
    width: 100%;
 }

但它失败了.

编辑:内容区域和左侧边栏必须填写整个浏览器窗口.....我不需要

|----------------------------|
|            header          |
|----------------------------|
|  L  |                      |
|  e  |                      |
|  f  |                      |
|  t  |                      |
|     |                      |
|  S  |   Content Area       |
|  i  |                      |
|  d  |----------------------|
|  e  |
|  b  |
|  a  |
|  r  |
|-----|

Answer 1

例子在jsFiddle

.top {
    position:absolute;
    left:0; right:0;
    height: 92px;
}
.left {
    position:absolute;
    left:0; top:92px; bottom: 0;
    width: 178px;
}
.main {
    position: absolute;
    left:178px; top:92px; right:0; bottom:0;
}

Answer 2

这是给你的简单代码.试试这个,知道质量CSS编码.

HTML:

<div class="main">
<div class="top">TOP</div>
<div class="left">LEFT</div>
<div class="right">MAIN</div>
<div class="clear"></div>
</div>

CSS:

.clear{
clear:both;
} 
.main{
width:500px;
}
.top {
background: blue;
width:500px;
height: 92px;
}
.left {
float:left;
width: 150px;
background: red;
}
.right{
float:right;
width:350px;
background: yellow;
}