如何制作带有页眉和左边栏的页面？
如何制作带有页眉和左边栏的页面？
提问于 2012-11-02 13:07:01
我想做一个这样的网页：
|----------------------------|
| header |
|----------------------------|
| L | |
| e | |
| f | |
| t | |
| | |
| S | Content Area |
| i | |
| d | |
| e | |
| b | |
| a | |
| r | |
|----------------------------|页眉的高度是固定的，但宽度应该是动态的。左边栏应该有一个固定的宽度和一个动态的高度。对于内容区域，高度和宽度都是动态的。当用户缩放他们的浏览器时，滚动条不应该出现(没有设置overflow:隐藏；来隐藏它。)
我试着写这样的代码：
<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 |
|-----|回答 7
Stack Overflow用户
回答已采纳
发布于 2012-11-02 13:54:39
.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;
}Stack Overflow用户
发布于 2012-11-02 17:34:08
下面是为您编写的简单代码。试试这个&知道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;
}Stack Overflow用户
发布于 2012-11-02 13:17:00
嗨，现在你只要像这样简单地做就行了。
Css
.top {
height: 92px;
}
.left {
width: 178px;
float:left;
}
.main {
margin-left:178px;
}HTML
<div class="top">
TOP
</div>
<div class="left">
LEFT
</div>
<div class="main">
N content here MAIN content here MAIN content here </div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13189610
复制相关文章
相似问题