为什么min-height不起作用？

所以这里是独家新闻。为什么min-height不起作用？

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

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

来源

2011-03-11 Dave

你使用什么浏览器？ – Neal 2011-03-11 19:00:14

Firefox，safari，chrome。 – Dave 2011-03-11 19:02:48

整洁的外观设计顺便说一句 – wsanville 2011-03-11 19:12:14

-4

拧紧它。谁还没有JavaScript呢？特别是对于这个人口。

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

来源

2011-03-11 20:25:17 Dave

那根本就没有回答“为什么” – 2014-03-07 15:18:46

+12

这只是不好使用JavaScript。你说你自己拧，但这不应该是事实上最好的办法。不喜欢它有一个正确的答案thingy。 – Lodewijk 2014-06-07 01:05:37

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

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

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

来源

2011-03-11 19:08:06 wsanville

是的，适用于主页，但不适用于“媒体”页面或任何扩展超过100％的页面。 – Dave 2011-03-11 19:17:19

拯救生命，谢谢！我甚至没有想过把100％放在HTML元素上！？！ – jstafford 2012-04-03 05:06:26

对于你来说，这是另一个疯狂的事实，只是在Chrome 30.0的最小案例中进行了测试：如果你用上面的方法创建了一个空白页面，那么只需使用'min-height：100％'添加'div'，'div'将伸展到“身体”的高度。如果你在第一个里面添加另一个'div'，并尝试'min-height：100％'，_it不会工作。你必须在包含子元素的每个级别传播'height：100％'，这些子元素有望伸展到100％的高度（这就是为什么CSS样式应用于_both_'html'和'body'）意思是'body'下的'div'。 – 2013-11-01 02:42:12

-3

东西是你的身体元素的高度设置为320像素（如果你在Chrome看的检查元素），因此100

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

你必须设置最小高度的工作高度。

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

来源

2011-03-11 19:08:48 Neal

不正确。您可以将HTML和body设置为最小高度：100％填充窗口。所以如果你将下一个元素设置为最小高度：100％，它应该填充父元素。此外，320像素来自内容，而不是任何CSS。 Chrome向您显示“显示”高度，而不是设置高度。 – Dave 2011-03-11 19:25:31

看@micheal copeland。同样的道理。这是320px的来源 - 最大的元素 – Neal 2011-03-11 19:51:04

也许更好的问题是：当身高为320px时，BODY的背景如何填充窗口。我们是否相信内容或背景？ – Dave 2011-03-11 20:06:38

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

来源

2011-03-11 19:16:01

但我设置HTML和BODY标签最小高度为100％，以便将（和它，看看梯度）填充窗口的高度。 – Dave 2011-03-11 19:32:36

如果将背景图片放在HTML和BODY标签上，我认为您尝试实现的效果会更容易。在这种情况下，你不必指定任何高度。 – 2011-03-11 19:52:03

尝试过，不行：/ – Dave 2011-03-11 20:24:32

position: absolute;作品在大多数情况下

来源

2013-09-11 14:20:15 harris

使用代替％VH为我工作，而无需使用任何额外的技巧。

这是我有：

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

哪里.wrapper是，您对容器/包装或内容的主体，你想拉伸屏幕高度的全长的类。

这将按照您期望的那样工作，当包装内的内容少于或高于屏幕高度允许的值时。

这应该工作在most browsers。

来源

2016-07-13 00:27:21 Neceros

为什么min-height不起作用？

回答

相关问题