21

我想做一个这样的网页：

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

但它失败了。

编辑：内容区和左侧栏必须填满整个浏览器窗口.....我不需要

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

7 回答 7

28

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;
}
于 2012-11-02T05:54:38.787 回答
6

这是给你的简单代码。试试这个并了解质量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;
}
于 2012-11-02T09:34:08.450 回答
2

现场演示

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

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>

现场演示

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

更新的演示

于 2012-11-02T05:16:59.717 回答
1

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

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

div {
    border: 1px solid #000;
}

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

于 2012-11-02T05:11:33.190 回答
1

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

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

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

 }
于 2012-11-02T05:11:34.523 回答
0

您还可以使用display : table和display : table-cell创建一个页面，该页面包含一个带有 2 个表格单元的表格级元素（侧边栏和内容区域）

示例图像

<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

于 2017-11-01T09:11:41.103 回答
0

我是css的新手，但我对html很熟悉。我接管了一个由其他人创建的网站，该网站广泛使用表格来放置网页。我正在重做网站的一页，省略了表格。我在 2012 年对 Lee 的上述解决方案发表评论。我通过添加“top:0;”使他的解决方案起作用。作为顶级 css 类的属性。我想我可以这样做，因为我注意到 left 也是 Lee 解决方案中左侧 css 类的属性。我想 Lee 的解决方案原样对我不起作用，因为现有 css 文件中肯定存在由其他人创建的冲突。

于 2021-08-14T10:26:32.370 回答