Html 如果 body 有 min-height，CSS 高度不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20681420/
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
CSS height not working if body has min-height
提问by Julian F. Weinert
I don't get my first child in the body to 100% height, if the body has min-heightspecified.
如果身体已经min-height指定，我不会让我的第一个孩子达到 100% 的高度。
<html>
<head>
<style>
html {
height:100%;
}
body {
min-height:100%;
}
#wrapper {
height:100%;
min-width:1120px; /* 250px each side (content width is 870px) */
max-width:2000px;
background-image:url(bg.png);
background-position:50% 25px;
background-repeat:no-repeat;
background-size:cover;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- web content -->
</div>
</body>
</html>
This does notresize the wrapper to the height of the window. When I remove the min-and use height, it'll work. But I have to have the content height variable...
这并不会调整包装器窗口的高度。当我删除min-并使用时height，它会起作用。但我必须有内容高度变量...
I did find some other posts here on SO and on google, but they have just questions and no solution.
我确实在 SO 和 google 上找到了其他一些帖子，但他们只有问题，没有解决方案。
采纳答案by Julian F. Weinert
I actually found a solution!
我真的找到了解决方案！
Now I have:
我现在有：
html, body {
height:100%;
}
So my body is not min-height. I don't remember why I changed it to min-height, but I hope I won't face the issue I obviously faced some time ago...
所以我的身体不是min-height。我不记得我为什么把它改成min-height，但我希望我不会面临我前一段时间显然面临的问题......
回答by kapa
When you use a percentage value for height, it will always be relative to the specified heightof the parent element. Not the actual height of the parent element, but the heightspecified in CSS.
当您为 使用百分比值时height，它将始终相对于height父元素的指定值。不是父元素的实际高度，而是heightCSS 中指定的高度。
So when your bodyelement has no heightspecified (only min-height, but that does not count), the 100%will not be able to take effect.
因此，当您的body元素没有height指定（只有min-height，但这不算数）时，100%将无法生效。
One possible solution is to use position: absolute; top: 0; bottom: 0;on your #wrapper, and your div will be stretched. This of course might have some layout consequences that you do not want.
一种可能的解决方案是position: absolute; top: 0; bottom: 0;在您的上使用#wrapper，您的 div 将被拉伸。这当然可能会产生一些您不想要的布局后果。
回答by joshuakcockrell
Short Answer
简答
Use height:100vh;for divs you want to stretch and fill the screen.
使用height:100vh;的div的要伸展和填充屏幕。
Do notset body's height: 100%;It will break your entire site if you have pages that have more than 100% in content height. They won't be able to scroll.
height: 100%;如果您的页面的内容高度超过 100%，请不要设置正文。它会破坏您的整个网站。他们将无法滚动。
Long Answer
长答案
If you want a few pages of your website to fill the entire screen while still allowing other pages to scroll (because they have more than 100% height in content), you need to set the div height to 100%, not the entire site-wide body height.
如果您希望网站的几个页面填满整个屏幕，同时仍允许其他页面滚动（因为它们的内容高度超过 100%），您需要将 div 高度设置为 100%，而不是整个网站 -宽体高。
Use this as general site-wide css:
将此用作一般站点范围的 css：
html {
height: 100%;
}
body {
min-height: 100%;
}
Then set specific divs to fill the entire screen (when they have less than 100% height in content):
然后设置特定的 div 以填充整个屏幕（当它们的内容高度低于 100% 时）：
/* Set any div heights to 100% of the screen height*/
.div {
height:100vh;
}
Explanation of the vh measurement: https://stackoverflow.com/a/16837667/4975772
