Html 如何使用css使主要内容div填充屏幕高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18665171/
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 the main content div fill height of screen with css
提问by user2713516
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.
所以我有一个带有页眉、主体和页脚的网页。我希望主体填充页面的 100%（在页脚和页眉之间填充 100%）我的页脚是绝对位置，底部为：0。每次我尝试将主体设置为 100% 高度或更改位置或其他东西时，它也会溢出标题。如果将主体设置为绝对位置top: 40（因为我的标题高 40 像素），它只会向下移动 40 像素，从而创建一个滚动条。
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 文件，因为我实际上无法从实际项目中发布整个页面/css。使用示例代码，即使 maincontent 主体填满了屏幕，它也向下移动了 40 像素（我假设是标题的原因）。
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;
}<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?
有谁知道答案吗？
回答by sudhan kantharuban
These are not necessary
这些不是必须的
- remove height in %
- remove jQuery
- 以 % 为单位去除高度
- 删除 jQuery
Stretch div using bottom & top :
使用底部和顶部拉伸 div：
.mainbody{
position: absolute;
top: 40px; /* Header Height */
bottom: 20px; /* Footer Height */
width: 100%;
}
check my code : http://jsfiddle.net/aslancods/mW9WF/
检查我的代码：http: //jsfiddle.net/aslancods/mW9WF/
or check here:
或在这里查看：
body {
margin:0;
}
.header {
height: 40px;
background-color: red;
}
.mainBody {
background-color: yellow;
position: absolute;
top: 40px;
bottom: 20px;
width:100%;
}
.content {
color:#fff;
}
.footer {
height: 20px;
background-color: blue;
position: absolute;
bottom: 0;
width:100%;
}<div class="header" >
</div>
<div class="mainBody">
<div class="content" >Hello world</div>
</div>
<div class="footer">
</div>回答by Mark Murphy
No Javascript, no absolute positioning and no fixed heights are required for this one.
这个不需要Javascript，不需要绝对定位和固定高度。
Here's an all CSS / CSS only method which doesn't require fixed heights or absolute positioning:
这是一个所有 CSS / CSS 的方法，它不需要固定高度或绝对定位：
CSS
CSS
.container {
display: table;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}
HTML
HTML
<div class="container">
<header class="header">
<p>This is the header</p>
</header>
<section class="content">
<div class="content-body">
<p>This is the content.</p>
</div>
</section>
<footer class="footer">
<p>This is the footer.</p>
</footer>
</div>
See it in action here: http://jsfiddle.net/AzLQY/
在这里查看它的实际效果：http: //jsfiddle.net/AzLQY/
The benefit of this method is that the footer and header can grow to match their content and the body will automatically adjust itself. You can also choose to limit their height with css.
这种方法的好处是页脚和页眉可以增长以匹配它们的内容，并且正文会自动调整自己。您还可以选择使用 css 限制它们的高度。
回答by joyBlanks
There is a CSS unit called viewport height / viewport width.
有一个 CSS 单元叫做视口高度/视口宽度。
Example
例子
.mainbody{height: 100vh;}similarly html,body{width: 100vw;}
.mainbody{height: 100vh;}相似地 html,body{width: 100vw;}
or 90vh = 90% of the viewport height.
或 90vh = 视口高度的 90%。
**IE9+ and most modern browsers.
**IE9+ 和大多数现代浏览器。
回答by Matthew
This allows for a centered content body with min-width for my forms to not collapse funny:
这允许具有最小宽度的居中内容主体使我的表单不会折叠有趣：
html {
overflow-y: scroll;
height: 100%;
margin: 0px auto;
padding: 0;
}
body {
height: 100%;
margin: 0px auto;
max-width: 960px;
min-width: 750px;
padding: 0;
}
div#footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 60px;
}
div#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
div#pageContent {
padding-bottom: 60px;
}
div#header {
width: 100%;
}
And my layout page looks like:
我的布局页面如下所示：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="pageContent"></div>
<div id="footer"></div>
</div>
</body>
</html>
Example here: http://data.nwtresearch.com/
这里的例子：http: //data.nwtresearch.com/
One more note, if you want the full page background like the code you added looks like, remove the height: auto !important;from the wrapper div: http://jsfiddle.net/mdares/a8VVw/
还有一点要注意，如果你想要像你添加的代码那样的完整页面背景，请height: auto !important;从包装器 div 中删除：http: //jsfiddle.net/mdares/a8VVw/
回答by Tricky12
Using top: 40pxand bottom: 40px(assuming your footer is also 40px) with no defined height, you can get this to work.
使用top: 40px和bottom: 40px（假设你的页脚也是 40px）没有定义的高度，你可以让它工作。
.header {
width: 100%;
height: 40px;
position: absolute;
top: 0;
background-color:red;
}
.mainBody {
width: 100%;
top: 40px;
bottom: 40px;
position: absolute;
background-color: gray;
}
.footer {
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
background-color: blue;
}
回答by TyMayn
Not sure exactly what your after, but I think I get it.
不知道你到底想要什么，但我想我明白了。
A header - stays at the top of the screen? A footer - stays at the bottom of the screen? Content area -> fits the space between the footer and the header?
标题 - 停留在屏幕顶部？页脚 - 停留在屏幕底部？内容区域 -> 适合页脚和页眉之间的空间吗？
You can do this by absolute positioning or with fixed positioning.
您可以通过绝对定位或固定定位来做到这一点。
Here is an example with absolute positioning: http://jsfiddle.net/FMYXY/1/
这是一个绝对定位的例子：http: //jsfiddle.net/FMYXY/1/
Markup:
标记：
<div class="header">Header</div>
<div class="mainbody">Main Body</div>
<div class="footer">Footer</div>
CSS:
CSS：
.header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;}
.mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;}
.footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; }
To make it work best, I'd suggest using % instead of pixels, as you will run into problems with different screen/device sizes.
为了使其发挥最佳效果，我建议使用 % 而不是像素，因为您会遇到不同屏幕/设备尺寸的问题。
回答by Chad
Well, there are different implementations for different browsers.
好吧，不同的浏览器有不同的实现。
In my mind, the simplest and most elegant solution is using CSS calc(). Unfortunately, this method is unavailable in ie8 and less, and also not available in android browsers and mobile opera. If you're using separate methods for that, however, you can try this: http://jsfiddle.net/uRskD/
在我看来，最简单、最优雅的解决方案是使用 CSS calc()。遗憾的是，该方法在ie8及更低版本中不可用，在android浏览器和移动opera中也不可用。但是，如果您为此使用单独的方法，则可以尝试以下操作：http: //jsfiddle.net/uRskD/
The markup:
标记：
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
And the CSS:
和 CSS：
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
min-height: calc(100% - 40px);
}
My secondary solution involves the sticky footer method and box-sizing. This basically allows for the body element to fill 100% height of its parent, and includes the padding in that 100% with box-sizing: border-box;. http://jsfiddle.net/uRskD/1/
我的第二个解决方案涉及粘性页脚方法和框大小。这基本上允许 body 元素填充其父元素的 100% 高度，并包含 100% 的填充box-sizing: border-box;。http://jsfiddle.net/uRskD/1/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#footer {
background: #f0f;
height: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#body {
background: #0f0;
min-height: 100%;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
}
My third method would be to use jQuery to set the min-height of the main content area. http://jsfiddle.net/uRskD/2/
我的第三种方法是使用 jQuery 来设置主要内容区域的最小高度。http://jsfiddle.net/uRskD/2/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
}
And the JS:
和JS：
$(function() {
headerHeight = $('#header').height();
footerHeight = $('#footer').height();
windowHeight = $(window).height();
$('#body').css('min-height', windowHeight - headerHeight - footerHeight);
});
回答by Adriano Moura
Relative values like: height:100% will use the parent element in HTML like a reference, to use relative values in height you will need to make your html and body tags had 100% height like that:
像这样的相对值：height:100% 将像引用一样使用 HTML 中的父元素，要使用高度的相对值，您需要使 html 和 body 标签具有 100% 的高度，如下所示：
HTML
HTML
<body>
<div class='content'></div>
</body>
CSS
CSS
html, body
{
height: 100%;
}
.content
{
background: red;
width: 100%;
height: 100%;
}
回答by evilReiko
Although this might sounds like an easy issue, but it's actually not!
虽然这听起来像是一个简单的问题，但实际上并非如此！
I've tried many things to achieve what you're trying to do with pure CSS, and all my tries were failure. But.. there's a possible solution if you use javascript or jquery!
我已经尝试了很多方法来实现您使用纯 CSS 所做的事情，但我所有的尝试都失败了。但是.. 如果您使用 javascript 或 jquery，有一个可能的解决方案！
Assuming you have this CSS:
假设你有这个 CSS：
#myheader {
width: 100%;
}
#mybody {
width: 100%;
}
#myfooter {
width: 100%;
}
Assuming you have this HTML:
假设你有这个 HTML：
<div id="myheader">HEADER</div>
<div id="mybody">BODY</div>
<div id="myfooter">FOOTER</div>
Try this with jquery:
用 jquery 试试这个：
<script>
$(document).ready(function() {
var windowHeight = $(window).height();/* get the browser visible height on screen */
var headerHeight = $('#myheader').height();/* get the header visible height on screen */
var bodyHeight = $('#mybody').height();/* get the body visible height on screen */
var footerHeight = $('#myfooter').height();/* get the footer visible height on screen */
var newBodyHeight = windowHeight - headerHeight - footerHeight;
if(newBodyHeight > 0 && newBodyHeight > bodyHeight) {
$('#mybody').height(newBodyHeight);
}
});
</script>
Note: I'm not using absolute positioning in this solution, as it might look ugly in mobile browsers
注意：我没有在这个解决方案中使用绝对定位，因为它在移动浏览器中看起来很难看
回答by Dan Dascalescu
This question is a duplicate of Make a div fill the height of the remaining screen spaceand the correct answer is to use the flexboxmodel.
这个问题是Make a div fill the height of the剩余屏幕空间的副本，正确答案是使用flexbox模型。
All major browsers and IE11+ support Flexbox. For IE 10 or older, or Android 4.3 and older, you can use the FlexieJSshim.
所有主流浏览器和 IE11+ 都支持 Flexbox。对于 IE 10 或更早版本，或者 Android 4.3 或更早版本，您可以使用FlexieJS垫片。
Note how simple the markup and the CSS are. No table hacks or anything.
请注意标记和 CSS 是多么简单。没有桌子黑客或任何东西。
html, body {
height: 100%;
margin: 0; padding: 0; /* to avoid scrollbars */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#header {
background: yellow;
height: 100px; /* can be variable as well */
}
#body {
flex: 1;
border: 1px solid orange;
}
#footer{
background: lime;
}
<div id="wrapper">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">
Footer<br/>
of<br/>
variable<br/>
height<br/>
</div>
</div>
In the CSS above, the flexproperty shorthands the flex-grow, flex-shrink, and flex-basisproperties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.
在上面的 CSS 中，flex属性简写了flex-grow、flex-shrink和flex-basis属性来建立弹性项目的灵活性。Mozilla对灵活的盒子模型有很好的介绍。
