如何使主要内容div填充高度的屏幕与css [英] How to make the main content div fill height of screen with css
问题描述
所以我有一个网页，包括标题，主体和页脚。
我希望主体填充100％的页面（填充页脚和标题之间的100％）
我的页脚是位置绝对与底部：0.每次我尝试设置主体为100％高度或改变位置或某事，它也会溢出标题。如果设置body的位置绝对与 top：40 （因为我的标题是40px高），它将只是向上40px太远，创建一个滚动条。 p>
我创建了一个简单的html文件，因为我不能实际发布整个页面/ css从实际项目。使用示例代码，即使主内容体填充屏幕，它会向下移动40px太远（因为我假设的标题）。
html，body {
margin：0;
padding：0;}
header {
height：40px;
width：100％;
background-color：blue;
}
#maincontent {
background-color：green;
height：100％;
width：100％;
}
footer {
height：40px;
width：100％;
background-color：gray;
position：absolute;
bottom：0;
}
html
< html>
< head>
< title> test< / title>
< link href =style.css =stylesheettype =text / css>
< / head>
< body>
< header>< / header>
< div id =maincontent>
< / div>
< footer>< / footer>
< / body>
< / html>任何人都知道答案？
$ b <解决方案
- 不需要％的高度
- 不需要jQuery
（！）stretch div使用bottom& top：
.mainbody {
position：absolute;
top：40px; / *头高度* /
bottom：20px; / *页脚高度* /
width：100％;
}
检查我的代码：http://jsfiddle.net/aslancods/mW9WF/
So I have a webpage with a header, mainbody, and footer.
I want the mainbody to fill 100% of the page (fill 100% in between footer and header)
My footer is position absolute with bottom: 0. Everytime I try to set the mainbody to 100% height or change position or something it will also overflow the header. If if set the body to position absolute with top: 40 (cause my header is 40px high), it will just go 40px too far down, creating a scroll bar.
I created a simple html file since i cannot actually post the entire page/css from the actual project. With the sample code, even though the maincontent body fills the screen, it goes 40px too far down (cause of the header I assume).
html, body{
margin: 0;
padding: 0;}
header{
height: 40px;
width: 100%;
background-color: blue;
}
#maincontent{
background-color: green;
height: 100%;
width: 100%;
}
footer{
height: 40px;
width: 100%;
background-color: grey;
position: absolute;
bottom: 0;
}
the html
<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<div id="maincontent">
</div>
<footer></footer>
</body>
</html>
Anyone knows the answer?
解决方案
- no height in % is needed
- no jQuery is needed
(!) stretch div using bottom & top :
.mainbody{
position: absolute;
top: 40px; /* Header Height */
bottom: 20px; /* Footer Height */
width: 100%;
}
check my code : http://jsfiddle.net/aslancods/mW9WF/
这篇关于如何使主要内容div填充高度的屏幕与css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
