如何使用CSS填充修复垂直空间 [英] How to make a div fill the remaning vertical space using css
问题描述
我尝试使用标题，导航栏制作标准网站布局（位于导航栏 ）和一个页脚。
现在我已经完成了这个操作：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://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-typecontent =text / html; charset = utf-8/>
< style type =text / cssmedia =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>标题< / div>
< div class =navbar>导航栏< / div>
< div class =body> Body< / div>
< div class =footer> Footer< / div>
< / body>
< / html>
会产生以下结果：
现在，如果我们检查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;
}
正如你看到的，我已经尝试设置<主体和导航栏的和最小高度填充剩余的垂直空间，即：
但它不影响它。然而，如果我做 height：500px 它调整大小像预期（当然，这不是很好的做法，因为不同的屏幕尺寸等将显示不同的部分或页面的视图） ：
>
所以基本上我问我如何能够使 divs 填充剩下的垂直空间，编码值 100px 而不是我想在百分比，因此页面将看起来相同在所有浏览器
将此代码添加到您的body，html：
body，html {
height：100％;
}
并使您的navbar < div id = navbar> 而不是< div class =navbar>
然后添加height：100％到您的navbar
#navbar {
height：100％
//您的代码的其余部分
}
与您的内容相同
称为内容，
#content {
height：100％
//其余代码
}
现在所有的div都有100％的高度， p>
编辑：您的完整代码将如下所示：
< DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://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-typecontent =text / html; charset = utf-8/>
< style type =text / cssmedia =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>标题< / div>
< div id =navbar>导航栏< / div>
< div id =content> Body< / div>
< div id =footer> Footer< / div>
< / body>
< / html>
I am attempting to make a standard website layout with a header, a navigation bar a 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:
.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 height and min-height of both the body and nav bar to fill the remaining vertical space i.e:
Yet it doesnt affect it. However if I do height: 500px it 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):
So basically I am asking how would I be able to make the divs fill the vertical space that's left over without using some hard-coded value i.e 100px rather I would want to do it in percentages thus the page will look the same on all browsers
add this code to your body,html:
body,html{
height:100%;
}
and make your navbar <div id="navbar"> instead of <div class="navbar">
then add height: 100%; to your navbar
#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.
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>
这篇关于如何使用CSS填充修复垂直空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
