Html 如何制作带有页眉和左侧边栏的页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13189610/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a page with header and left-sidebar?
提问by Lingfeng Xiong
I'd like to make a webpage like this:
我想做一个这样的网页：
|----------------------------|
| header |
|----------------------------|
| L | |
| e | |
| f | |
| t | |
| | |
| S | Content Area |
| i | |
| d | |
| e | |
| b | |
| a | |
| r | |
|----------------------------|
The header has a fixed height but it's width should be dynamic. The left-sidebar should have a fixed width but a dynamic height. For the content area, both height and width are dynamic. When user scale their browser, the scrolling bar should not appear(not set overflow:hidden; to hide it.).
标题有一个固定的高度，但它的宽度应该是动态的。左侧边栏应该有一个固定的宽度，但一个动态的高度。对于内容区域，高度和宽度都是动态的。当用户缩放浏览器时，滚动条不应出现（未设置溢出：隐藏；隐藏它。）。
I tried to write code like this:
我试着写这样的代码：
<div class="top">
TOP
</div>
<div class="left">
LEFT
</div>
<div class="main">
MAIN
</div>
with CSS:
使用 CSS：
.top {
width: 100%;
height: 92px;
}
.left {
width: 178px;
height: 100%;
float:left;
}
.main {
float: left;
height: 100%;
width: 100%;
}
But it failed.
但它失败了。
EDIT: Content Area and Left-SideBar must fill the whole browser window..... I don't need
编辑：内容区域和左侧栏必须填满整个浏览器窗口......我不需要
|----------------------------|
| header |
|----------------------------|
| L | |
| e | |
| f | |
| t | |
| | |
| S | Content Area |
| i | |
| d |----------------------|
| e |
| b |
| a |
| r |
|-----|
回答by Lee
.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;
}
回答by Sandeep Pattanaik
Here is the simple code for you. Try this & know the quality CSScoding.
这是给你的简单代码。试试这个并了解质量CSS编码。
HTML:
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:
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;
}
回答by Rohit Azad
Hi now you just do easily as like this
嗨，现在你就像这样轻松地做
Css
css
.top {
height: 92px;
}
.left {
width: 178px;
float:left;
}
.main {
margin-left:178px;
}
HTML
HTML
<div class="top">
TOP
</div>
<div class="left">
LEFT
</div>
<div class="main">
N content here MAIN content here MAIN content here </div>
------------
------------
回答by Useful Angle
You can also use display : tableand display : table-cellto create a page that holds a table-level element with 2 table-cells (sidebar & content area)
您还可以使用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;
}
A tutorial with a demo here : http://usefulangle.com/post/61/html-page-with-left-sidebar-main-content-with-css
带有演示的教程：http: //usefulangle.com/post/61/html-page-with-left-sidebar-main-content-with-css
回答by Mike Trusov
You just need to remove "float: left;"from your .maindefinition.
你只需"float: left;"要从你的.main定义中删除。
Also, when debugging positioning this really helps:
此外，在调试定位时，这确实有帮助：
div {
border: 1px solid #000;
}
Also it might be worth dropping height: 100%from .left and .main to prevent vertical scrollbar
也可能值得height: 100%从 .left 和 .main 删除以防止垂直滚动条
回答by Miqdad Ali
Demo : http://jsfiddle.net/nRQeA/
演示：http: //jsfiddle.net/nRQeA/
.top {
width: 100%;
height: 92px;
}
.left {
width: 20%;
height: 100%;
float:left;
}
.main {
float: left;
height: 100%;
width: 80%
}
