Html 无论封闭内容的高度如何，如何让包装器 <div> 填充浏览器高度的 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18694802/
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 get a wrapper <div> to fill 100% of a browser's height regardless of the height of the enclosed content?
提问by Ed King
This question seems to have been answered a gazillion times in various forms but I still can't find an answer that works for me. Put simply, I have this layout:
这个问题似乎已经以各种形式回答了无数次，但我仍然找不到适合我的答案。简而言之，我有这样的布局：
<body>
<div class="wrapper">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
</body>
I want wrapperto be centered horizontally in the browser and for it to fill 100% of the browser's height. Each of the enclosed <div>elements has a fixed height that more often than not sum to a height that is greater than the browser window's height. If this is the case, I get the layout I want.
我想wrapper在浏览器中水平居中并填充浏览器高度的 100%。每个封闭的<div>元素都有一个固定的高度，这个高度的总和通常大于浏览器窗口的高度。如果是这种情况，我会得到我想要的布局。
If, however, the browser window's height is greater than the combined height of the enclosed <div>elements (as is the case on an iMac or portrait iPhone orientation, for example), then the wrapperseems to stop with the end of the footerand the rest of the window below this is <body>background. The wrapperbackground and <body>background are different colours, so it is quite obvious that this is the case.
但是，如果浏览器窗口的高度大于封闭<div>元素的组合高度（例如在 iMac 或纵向 iPhone 方向上的情况），那么wrapper似乎在结束footer和其余部分停止下面的窗口是<body>背景。的wrapper背景和<body>背景不同的颜色，所以这是很明显，这是如此。
Does anyone have a CSS solution to this, so that the wrapperfills the browser height regardless of whether this height is greater or less than the combined height of the content?
有没有人对此有 CSS 解决方案，以便wrapper无论此高度是大于还是小于内容的组合高度，都会填充浏览器高度？
EDIT: ANSWER:
编辑： 答案：
The answer was a combination of the answers below and something that I happened upon just now: In the CSS, do this:
答案是以下答案和我刚才发生的事情的组合：在 CSS 中，执行以下操作：
body, html {
height: 100%;
margin: 0px auto;
padding: 0px auto;
}
.wrapper {
height: auto; /* These two lines were the key. */
min-height: 100%
/*overflow: hidden;*/ /* Do not use this, it crops in small browsers. */
margin: 0px auto;
padding: 0px auto;
}
回答by Benjamin
If you want to set a div height to 100%, you should set the height of html and body to 100% as well. Then you can add 100% to the div.
如果要将 div 高度设置为 100%，则还应将 html 和 body 的高度设置为 100%。然后您可以将 100% 添加到 div。
CSS
CSS
.wrapper {
border: 1px solid red;
height: 100%;
margin: 0px auto;
overflow: hidden;
}
body, html {
height: 100%;
}
Take a look at this jfiddle.
看看这个jfiddle。
回答by António Regadas
If you want to have an element that fills 100% the height of the viewport, you need to have:
如果你想要一个元素填充 100% 视口的高度，你需要有：
body, html {
height: 100%;
}
#wrapper {
height: 100%;
}
回答by Love Trivedi
for centering wraper div
用于居中包装 div
body{
margin:0px;
padding:0px;
height:100%;
}
.wraper{
width:90%;
margin:0px auto;
height:100%;
overflow:hidden
}
