我想制作一个这样的网页：
|----------------------------| | 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;
}
