我在body元素上应用了一个渐变背景。然后，在body元素之后，有一个容器(#body2)，其背景是一个.png图像。渐变总是会扩展到至少100%的窗口高度，但容器(#body2)没有。
为什么不起作用？您可以在我的网页上检查HTML：http://www.savedeth.com/parlours/
为什么我的页面上min-height不起作用？
45
- Dave
2
Firefox，Safari，Chrome。 - Dave
不太确定，但您可能会发现_这个_问题非常有帮助。 - dialer
7个回答
36
在第1358行上，对于html、body和#body2元素，指定height: 100％。
html, body, #body2
{
height: 100%;
min-height: 100%;
}
未在IE 6中测试，在7中可以正常工作。
- wsanville
3
4可以在主页上工作，但无法在“媒体”页面或任何超过100%的页面上扩展。 - Dave
2救命稻草，谢谢！我甚至没有想到在HTML元素上设置100％！？！ - jstafford
12这里有另一个疯狂的事实，仅在Chrome 30.0的最小情况下进行测试：如果您创建一个只包含上述内容的空页面，然后仅使用
min-height:100%添加一个div，那么该div将完美地延伸到body的高度。如果您随后在第一个div中再添加另一个div，并尝试使用min-height:100%，则它将无法正常工作。您必须通过每个级别向下传播height:100%，以便包含预期延伸到100％高度的子元素（这就是为什么CSS样式应用于html和body的原因），在这种情况下意味着直接位于body下面的div。 - Engineer31
使用 vh 替代 % 对我有用，而不需要使用任何额外的技巧。
这是我拥有的内容：
html, body, .wrapper {
min-height: 100vh;
}
当你希望容器/包装器或主内容的类为 .wrapper 时，它将使内容延伸至全屏高度。
当包装器内的内容少于或多于屏幕高度时，它将按预期工作。
这应该在大多数浏览器中运行。
- Neceros
2
对我来说也是如此...我的情况是父级 div 也设置了 min-height，因此 unless 使用 'vh'，min-height 在子级 div 上不起作用，很奇怪。 - Bersan
2注意，如果有滚动条，100vh不会考虑滚动条的高度。 - Emmanuel Meric de Bellefon
3
你将最小高度设置为100%，这只会与填充空间的任何元素一样高。请用像素来表达您的最小高度。此外，请注意IE6-需要它自己的一套规则。有关更多详细信息，请参见http://davidwalsh.name/cross-browser-css-min-height。
- Michael Copeland
2
但是我将HTML和BODY标签的最小高度设置为100％，因此它将（并且确实如此，请查看渐变）填充窗口的高度。 - Dave
如果你将背景图片放置在 HTML 和 BODY 标签上，我认为你想要实现的效果会更容易些。这种情况下，你就不需要指定任何高度了。 - Michael Copeland
2
position: absolute; 在大多数情况下都是有效的。例如：
#body2 {
position: absolute;
min-height: 100%;
}
- harris
1
完整答案
html, body {
min-height: 100vh;
}
.wrapper {
min-height: calc(100vh - <margin-top + margin-bottom>px);
}
- Masih Jahangiri
-4
某些东西正在将您的body元素的高度设置为320像素（如果您在Chrome的检查元素中查看）
因此，100％是320像素。这就是为什么它只显示在页面顶部，高度为320像素的100％。
您必须设置一个高度才能使min-height起作用。
因此，通常情况下将高度设置为100％应该可以解决问题。
- Naftali
4
2不是这样的。你可以设置HTML和body的min-height为100％，以填满窗口。因此，如果将下一个元素设置为min-height：100％，它应该填充父元素。另外，320px来自内容，而不是任何CSS。Chrome向您显示“显示”高度，而不是设置的高度。 - Dave
看看 @micheal copeland。同样的原因。这就是320像素的来源 - 最大的元素。 - Naftali
也许更好的问题是：当BODY的高度为320px时，它的背景如何填充窗口。我们信任内容还是背景？ - Dave
既然您将min-height设置为100％，那么它就会根据内容进行调整。 - Naftali
-9
算了吧。反正谁没有 JavaScript 呢？尤其是对于这个人群来说。
<script type="text/javascript">
$(document).ready(function(){
if($("body").height() < $(window).height()){
$("body").height($(window).height());
}
});
</script>
- Dave
4
4这完全没有回答"为什么"。 - Maël Nison
20使用JavaScript并不好。虽然你曾经说过"算了(Screw it)"，但这并不应该成为默认的最佳选择。对于它获得了正确的答案感到不满意。 - Lodewijk
Jquery相当过头了。 - Crupeng
直到现在，我从未因为有趣而不是正确或实用而点赞一个答案。做得好！ - Michael Sinclair
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接