如何使用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屋!