Html 如何使 div 使用 css 填充剩余的垂直空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15923019/
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 div fill the remaning vertical space using css
提问by David Kroukamp
I am attempting to make a standard website layout with a header, a navigation bara body (on the right of the navigation bar) and a footer.
我正在尝试使用标题、导航栏、正文（在导航栏的右侧）和页脚制作标准网站布局。
Now I have so far done this:
现在我已经做到了这一点：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.header {
float: top;
width: 100%;
height: 75px;
}
.navbar {
float: left;
width: 20%;
height: 100%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.footer {
float: bottom;
width: 100%;
}
</style>
</head>
<body>
<div class="header"> Header </div>
<div class="navbar"> Nav Bar </div>
<div class="body"> Body </div>
<div class="footer"> Footer</div>
</body>
</html>
which produces this:
产生这个：
Now if we check the CSS:
现在，如果我们检查 CSS：
.navbar {
float: left;
width: 20%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
As you can see I have tried to set the heightand min-heightof both the body and nav barto fill the remaining vertical space i.e:
如您所见，我尝试设置主体和导航栏的高度和最小高度以填充剩余的垂直空间，即：
Yet it doesnt affect it. However if I do height: 500pxit resizes like expected (of course this now wont be very good practice as different screen sizes etc would show a different portion or view of the page):
然而它并不影响它。但是，如果我按照height: 500px预期调整大小（当然，这现在不是很好的做法，因为不同的屏幕尺寸等会显示页面的不同部分或视图）：
So basically I am asking how would I be able to make the divsfill the vertical space that's left over without using some hard-coded value i.e 100pxrather I would want to do it in percentages thus the page will look the same on all browsers
所以基本上我在问我如何能够divs在不使用一些硬编码值的情况下填充剩下的垂直空间，即100px我想以百分比来做，因此页面在所有浏览器上看起来都一样
采纳答案by Kees Sonnema
add this code to your body,html:
将此代码添加到您的正文，html：
body,html{
height:100%;
}
and make your navbar <div id="navbar">instead of <div class="navbar">then add height: 100%; to your navbar
并制作您的导航栏，<div id="navbar">而不是<div class="navbar">添加高度：100%；到您的导航栏
#navbar{
height:100%
// rest of your code
}
Same to your content call it something like content, because body is already used.
与您的内容相同，将其称为内容，因为已经使用了正文。
#content{
height:100%
// rest of your code
}
now all the divs will have a height of 100% so the full browser height.
现在所有的 div 的高度都是 100%，所以浏览器的高度。
EDIT: your full code would look like this:
编辑：您的完整代码如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
width: 100%;
height: 75px;
}
#navbar {
float: left;
width: 20%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#content {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#footer {
width: 100%;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
回答by Doin
Use absolute positioning for each content block (header, footer, sideber, body), and for the body and nav-bar divs, set both top and bottom position properties, rather than specifying the height property. This will force them to fill the remaining viewport height.
对每个内容块（页眉、页脚、边栏、正文）使用绝对定位，对于正文和导航栏 div，设置顶部和底部位置属性，而不是指定高度属性。这将强制它们填充剩余的视口高度。
...and for supporting IE5 and IE6, here's an improved versionusing only CSS (no javascript).
