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%;
 }

但它失败了。

编辑：Content Area和Left-SideBar必须填满整个浏览器窗口..... 我不需要

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

Answer 1

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

Answer 2

以下是您的简单代码。尝试这个＆amp;知道质量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;
}

Answer 3

的 LIve demo 的

嗨，现在你就像这样轻松做到了

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

的 Live demo 的

------------

的 Updated Demo 的

Answer 4

您只需要从"float: left;"定义中删除.main。

此外，调试定位时，这确实有帮助：

div {
    border: 1px solid #000;
}

也可能值得从.left和.main中删除height: 100%以防止垂直滚动条

Answer 5

演示：http://jsfiddle.net/nRQeA/

.top {
    width: 100%;
    height: 92px;

}
.left {
    width: 20%;
    height: 100%;
    float:left;
}
.main {
    float: left;
    height: 100%;
    width: 80%

 }

Answer 6

您还可以使用 display：table 和 display：table-cell 创建一个页面，其中包含一个包含2个表格单元格的表格级元素（侧栏和＆amp;内容区域）

<div id="outer-container">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>

#outer-container {
    display: table;
    width: 100%;
    height: 100%;
}

#sidebar {
    display: table-cell;
    width: 15%;
    vertical-align: top;
}

#content {
    display: table-cell;
    width: 85%;
    vertical-align: top;
}

这里有一个演示教程：http://usefulangle.com/post/61/html-page-with-left-sidebar-main-content-with-css

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

6 个答案:

------------