为什么最小高度不起作用？

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元素的背景。然后我有一个容器（在身体后面），它有一个背景.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/

6 个解决方案

#1

Specify height: 100% on the html, body and #body2 elements (line 1358).

在html，body和＃body2元素上指定高度：100％（第1358行）。

html, body, #body2
{
    height: 100%;
    min-height: 100%;
}

Not tested in IE 6, works in 7 though.

未在IE 6中测试，但在7中工作。

#2

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.

这应该适用于大多数浏览器。

#3

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-height for more details.

您将最小高度设置为100％，这将仅与填充空间的任何元素一样高。用像素表示最小高度。另外，请注意IE6-需要它自己的一套规则。有关详细信息，请参阅http://davidwalsh.name/cross-browser-css-min-height。

#4

position: absolute; works in most cases

位置：绝对;适用于大多数情况

#5

-3

something is setting the height of your body element to 320px (if you look in chrome's inspect element)

有些东西是将你的身体元素的高度设置为320px（如果你看看chrome的inspect元素）

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。这就是为什么它只显示在页面顶部100％的320 px高度。

you have to set a height for the min-height to work.

你必须设置一个高度才能使最小高度起作用。

so set the height @ 100% in general should work.

所以设置高度@ 100％一般应该工作。

#6

-3

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>

#1