html – 如何使用页眉和左侧栏制作页面？

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

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

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

我试图写这样的代码：

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

解决方法

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

原文地址：https://www.jb51.cc/html/231203.html