Html 为什么最小高度不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5277161/
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
Why is min-height not working?
提问by Dave
So here's the scoop.
所以这是独家新闻。
I have a gradient applied to the background of the body element. Then I have a container (right after body) that has a background .png image applied to it. The gradient always expands to at least 100% window height but the container (#body2) does not.
我有一个渐变应用于 body 元素的背景。然后我有一个容器（在 body 之后），它应用了背景 .png 图像。渐变始终扩展到至少 100% 的窗口高度，但容器 (#body2) 不会。
Any suggestions to why this doesn't work? You can inspect the HTML on my web page here: http://www.savedeth.com/parlours/
关于为什么这不起作用的任何建议？你可以在这里检查我网页上的 HTML：http: //www.savedeth.com/parlours/
采纳答案by Dave
Screw it. Who doesn't have javascript anyways? Especially for this demographic.
算了。谁没有 javascript 呢？尤其是对于这个人群。
<script type="text/javascript">
$(document).ready(function(){
if($("body").height() < $(window).height()){
$("body").height($(window).height());
}
});
</script>
回答by wsanville
Specify height: 100%on the html, bodyand #body2elements (line 1358).
height: 100%在html,body和#body2元素上指定（第 1358 行）。
html, body, #body2
{
height: 100%;
min-height: 100%;
}
Not tested in IE 6, works in 7 though.
未在 IE 6 中测试，但可在 7 中使用。
回答by Neceros
Using vh instead of % worked for me without having to use any extra tricks.
使用 vh 而不是 % 对我有用，而无需使用任何额外的技巧。
This is what I have:
这就是我所拥有的：
html, body, .wrapper {
min-height: 100vh;
}
Where .wrapper is the class you apply to your container/wrapper or main body of content that you wish to stretch the full length of the screen height.
其中 .wrapper 是您应用于容器/包装器或希望拉伸整个屏幕高度的内容主体的类。
This will work as you would expect it to when the content within the wrapper is less or more than the screen height allows.
当包装器中的内容小于或大于屏幕高度允许时，这将按您的预期工作。
This should work in most browsers.
这应该适用于大多数浏览器。
回答by Michael Copeland
You have your min-height set to 100% which will only be as tall as any elements that fill the space. Express you min-height in terms of pixels. Also, note that IE6- requires it's own set of rules. See http://davidwalsh.name/cross-browser-css-min-heightfor more details.
您将 min-height 设置为 100%，这将仅与填充空间的任何元素一样高。以像素表示您的最小高度。另外，请注意 IE6- 需要它自己的一套规则。有关更多详细信息，请参阅http://davidwalsh.name/cross-browser-css-min-height。
回答by harris
position: absolute;works in most cases
position: absolute;在大多数情况下有效
回答by Naftali aka Neal
something is setting the height of your body element to 320px (if you look in chrome's inspect element)
某些东西将您的 body 元素的高度设置为 320px（如果您查看 chrome 的检查元素）
therefore 100% is of 320px. that is why is it only showing on the top of the page with 100% of 320 px height.
因此 100% 是 320px。这就是为什么它只显示在 320 像素高度的 100% 的页面顶部。
you have to set a height for the min-height to work.
你必须为最小高度设置一个高度才能工作。
so set the height @ 100% in general should work.
所以设置高度@ 100% 一般应该有效。
