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

概述我想制作一个这样的网页： |----------------------------|| header ||----------------------------|| L | || e | || f | || 我想制作一个这样的网页：

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

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

我试图写这样的代码：

<div >    top</div><div >    left</div><div >    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;}

总结

以上是内存溢出为你收集整理的html – 如何使用页眉和左侧栏制作页面？全部内容，希望文章能够帮你解决html – 如何使用页眉和左侧栏制作页面？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。