Html 在绝对 div 上设置高度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14217783/
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
Set height 100% on absolute div
提问by Nworks
I am facing a problem with overlaying a 100% height div. I could use position fixed to solve the cover, but that's not really what I want because you should be able to scroll down on the 'cover' > so people with lower resolutions than mine can see the entire content.
我面临覆盖 100% 高度 div 的问题。我可以使用固定位置来解决封面问题，但这并不是我真正想要的，因为您应该能够向下滚动“封面”>，因此分辨率低于我的人可以看到整个内容。
Code example:
代码示例：
HTML
HTML
<body>
<div>Overlay example text</div>
</body>
CSS
CSS
body {
float: left;
height: 3000px;
width: 100%;
}
body div {
position: absolute;
height: 100%;
width: 100%;
background-color: yellow;
}
The problem:The div's height 100% only contains 100% of the webbrowser/viewport, but I want it to cover the entire body.
问题：div 的高度 100% 只包含 100% 的 webbrowser/viewport，但我希望它覆盖整个身体。
Thanks in advance :)
提前致谢 ：）
回答by Pete
try adding
尝试添加
position:relative
to your body styles. Whenever positioning anything absolutely, you need one of the parent containers to be positioned relative as this will make the item be positioned absolute to the parent container that is relative.
到你的体型。每当绝对定位任何东西时，您都需要相对定位父容器之一，因为这将使项目绝对定位到相对的父容器。
As you had no relative elements, the css will not know what the div is absolutely position to and therefore will not know what to take 100% height of
由于您没有相关元素，因此 css 将不知道 div 的绝对位置，因此不知道采取 100% 高度的
回答by ashley
http://jsbin.com/ubalax/1/edit.You can see the results here
http://jsbin.com/ubalax/1/edit。你可以在这里看到结果
body {
position: relative;
float: left;
height: 3000px;
width: 100%;
}
body div {
position: absolute;
height: 100%;
width: 100%;
top:0;
left:0;
background-color: yellow;
}
回答by Jerome Cance
Few answers have given a solution with height and width 100% but I recommend you to not use percentage in css, use top/bottom and left/right positionning.
很少有答案给出高度和宽度为 100% 的解决方案，但我建议您不要在 css 中使用百分比，而使用顶部/底部和左/右定位。
This is a better approach that allow you to control margin.
这是一种更好的方法，可以让您控制保证金。
Here is the code :
这是代码：
body {
position: relative;
height: 3000px;
}
body div {
top:0px;
bottom: 0px;
right: 0px;
left:0px;
background-color: yellow;
position: absolute;
}
回答by Misja
Instead of using the body, using htmlworked for me:
而不是使用body，使用html对我有用：
html {
min-height:100%;
position: relative;
}
div {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
}
回答by Kevin Redman
Complete stretching (horizontal/vertical)
完全拉伸（水平/垂直）
The accepted answer is great. Just want to point out some things for others coming here. Margins are not necessary in these cases. If you want a centered layout with a specific "Margin", you can add them to the right and left, like so:
接受的答案很棒。只是想为来到这里的其他人指出一些事情。在这些情况下不需要边距。如果您想要具有特定“边距”的居中布局，您可以将它们添加到右侧和左侧，如下所示：
.stretched {
position: absolute;
right: 50px; top: 0; bottom: 0; left: 50px;
margin: auto;
}
This is extremely useful.
这是非常有用的。
Centering div (vertical/horizontally)
居中 div（垂直/水平）
As a bonus, absolute centering which can be used to get extremely simple centering:
作为奖励，绝对居中可用于获得极其简单的居中：
.centered {
height: 100px; width: 100px;
right: 0; top: 0; bottom: 0; left: 0;
margin: auto;
position: absolute;
}
回答by Gaurav
Another solution without using any height but still fills 100% available height. Checkout this e.g on the codepen. http://codepen.io/gauravshankar/pen/PqoLLZ
另一种不使用任何高度但仍填充 100% 可用高度的解决方案。在 codepen 上检查一下。http://codepen.io/gauravshankar/pen/PqoLLZ
For this html and body should have 100% height. This height is equal to the viewport height.
对于这个 html 和 body 应该有 100% 的高度。该高度等于视口高度。
Make inner div position absolute and give top and bottom 0. This fills the div to available height. (height equal to body.)
使内部 div 位置绝对，并给顶部和底部 0。这将 div 填充到可用高度。（高度等于身体。）
html code:
html代码：
<head></head>
<body>
<div></div>
</body>
</html>
css code:
css代码：
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
position: relative;
}
html {
background-color: red;
}
body {
background-color: green;
}
body> div {
position: absolute;
background-color: teal;
width: 300px;
top: 0;
bottom: 0;
}
