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

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是您应用于容器/包装器或内容主体的类,您希望将其拉伸到屏幕高度的整个长度.

当包装器中的内容小于或大于屏幕高度允许时,这将按预期工作.

这适用于大多数浏览器.

Answer 3

算了。谁没有 javascript 呢？特别是对于这个人群。

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