Html 带有全尺寸左侧导航栏和标题的 CSS 布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3456238/
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
CSS Layout with full size left navbar and header
提问by Dave
I would like to have the following layout
我想要以下布局
+++++++++++++++++++++++
+Header +
+++++++++++++++++++++++
+Nav+ +
+ + +
+ + +
+ + Content +
+ + +
+++++++++++++++++++++++
so basically a two column layout with a header. I've checked many CSS layout generators on the net, but they just produced me a result where the left navbar is as big as the content in it. I can scale it with "height:500px" or whatever, but i want it to be fullsize (from top to bottom of browser window) all the time. Changing the value with "height:100%" does not work. If you want to try it out yourself: http://guidefordesign.com/css_generator.phpand then select full page, two column layout, with header to see what i mean. If you want you can tell me which property i have to adjust in the generated css file to make it work
所以基本上是一个带有标题的两列布局。我在网上检查了许多 CSS 布局生成器，但它们只是给我一个结果，其中左侧导航栏与其中的内容一样大。我可以用“height:500px”或其他什么来缩放它，但我希望它一直是全尺寸的（从浏览器窗口的顶部到底部）。使用“height:100%”更改值不起作用。如果您想自己尝试一下：http: //guidefordesign.com/css_generator.php，然后选择整页、两列布局和标题以了解我的意思。如果你愿意，你可以告诉我我必须在生成的 css 文件中调整哪个属性才能使其工作
回答by Sotiris
You can try this. It works on the browsers I tested (Firefox, IE7+8, Opera, Safari, Chrome). Just play around with the percentage units for header and columns.
你可以试试这个。它适用于我测试过的浏览器（Firefox、IE7+8、Opera、Safari、Chrome）。只需使用标题和列的百分比单位即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>for stackoverflow</title>
<style>
body, html {
padding : 0px;
margin : 0px;
height : 100%;
}
#wrapper {
width:900px;
height:100%;
margin: 0px;
padding: 0px;
}
#header {
height:10%;
background-color:#930;
width:900px;
}
#nav {
background-color:#999;
width:200px;
height:90%;
float:left;
}
#content {
height:90%;
background-color:#363;
width:700px;
float:left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
</div>
</body>
回答by Sarfraz
You might want to have a look at and get the idea from:
您可能想查看以下内容并从中获得想法：
回答by miku
A little general answer: Look into CSS frameworks, like http://www.blueprintcss.org/- these let you define grids.
一个一般性的答案：查看 CSS 框架，例如http://www.blueprintcss.org/- 这些框架可让您定义网格。
Here's a sample page: http://www.blueprintcss.org/tests/parts/sample.html
这是一个示例页面：http: //www.blueprintcss.org/tests/parts/sample.html
Concerning the height problem, try out this (should give you 100% of browser window height for your div all the time):
关于高度问题，试试这个（应该始终为您的 div 提供 100% 的浏览器窗口高度）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
body {
padding: 0px;
}
.Container {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: #123456;
color: black;
}
</style>
</head>
<body>
<div class="Container">
</div>
</body>
</html>
回答by Naruto
A solution you can try, is to give the content area a background image which is repeated vertically (1px height and width of your page). The left side of that image would have the nav background color, and the rest would be the color of the content background color ...
您可以尝试的一种解决方案是为内容区域提供一个垂直重复的背景图像（页面的高度和宽度为 1 像素）。该图像的左侧将具有导航背景颜色，其余部分将是内容背景颜色的颜色......
