Question

所以这是独家新闻。

我有一个渐变应用于body元素的背景。然后我有一个容器（在身体后面），它有一个背景.png图像。渐变总是扩展到至少100％窗口高度，但容器（＃body2）不会。

为什么这不起作用的任何建议？您可以在我的网页上查看HTML：http://www.savedeth.com/parlours/

Answer 1

在height: 100%，html和body元素上指定#body2（第1358行）。

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

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

Answer 2

使用vh而不是％为我工作，而不必使用任何额外的技巧。

这就是我所拥有的：

html, body, .wrapper {
    min-height: 100vh;
}

其中.wrapper是您应用于容器/包装器或要扩展屏幕高度的整个内容主体的类。

当包装内的内容小于或大于屏幕高度允许时，这将按照您的预期工作。

这应该适用于most browsers。

Answer 3

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

Answer 4

position: absolute;适用于大多数情况

Answer 5

将body元素的高度设置为320px（如果查看chrome的inspect元素）

因此，100％是320px。这就是为什么它只显示在页面顶部100％的320像素高度。

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

所以设置高度@ 100％一般应该有效。

Answer 6

拧紧它。谁没有javascript呢？特别是对于这个人群。

<script type="text/javascript">
$(document).ready(function(){
if($("body").height() < $(window).height()){
    $("body").height($(window).height());
}
});
</script>

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

6 个答案: