【问题标题】：Why doesn't min-height not work on my page?为什么 min-height 在我的页面上不起作用？
【发布时间】：2021-10-02 03:41:05
【问题描述】：

我在 body 元素的背景上应用了渐变。然后我有一个应用了背景 .png 图像的容器（就在主体之后）。渐变总是扩展到至少 100% 的窗口高度，但容器 (#body2) 不会。

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

【问题讨论】：

火狐，野生动物园，铬。
不太确定，但您可能会发现 this 问题很有帮助。

标签： html background-image css

【解决方案1】：

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

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

未在 IE 6 中测试，但在 7 中有效。

【讨论】：

是的，适用于主页，但不适用于“媒体”页面或任何扩展超过 100% 的页面。
救命稻草，谢谢！我什至没有想过将 100% 放在 html 元素上！？！
这对你来说是另一个疯狂的事实，刚刚在 Chrome 30.0 上以最小的情况进行了测试：如果你只使用上面的内容创建一个空页面，然后使用 min-height: 100% 添加一个 div，即 @ 987654328@ 将很好地伸展到body 的高度。如果您随后在第一个中添加另一个div，然后尝试min-height: 100%，它将不起作用。您必须将height:100% 向下传播到每个包含子元素的级别，这些子元素预计会拉伸到 100% 高度（这就是 CSS 样式应用于 both html 和 body 的原因)，在这种情况下表示div 直接位于body 之下。

【解决方案2】：

使用 vh 而不是 % 对我有用，而无需使用任何额外的技巧。

这就是我所拥有的：

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

其中 .wrapper 是您应用于容器/包装器或您希望拉伸整个屏幕高度的内容主体的类。

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

这应该在most browsers 中工作。

【讨论】：

对我来说也是如此......在我的情况下，父 div 也设置了最小高度，因此最小高度对子 div 不起作用，除非使用 'vh' WEIRD。
注意100vh不考虑滚动条高度，如果有的话

【解决方案3】：

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

【讨论】：

但是我将 HTML 和 BODY 标签的 min-height 设置为 100%，这样会（确实如此，看看渐变）填充窗口的高度。
我认为如果您将背景图片放在 HTML 和 BODY 标记上，您尝试实现的效果会容易得多。在这种情况下，您不必指定任何高度。

【解决方案4】：

position: absolute; 在大多数情况下都有效

【讨论】：

【解决方案5】：

完整答案

html, body {
  min-height: 100vh;
}
.wrapper {
  min-height: calc(100vh - <margin-top + margin-bottom>px);
}

【讨论】：

【解决方案6】：

有些东西正在将你的 body 元素的高度设置为 320 像素（如果你查看 chrome 的检查元素）

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

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

所以通常将高度设置为 100% 应该可以工作。

【讨论】：

不正确。您可以将 HTML 和 body 设置为 min-height: 100% 以填充窗口。因此，如果将下一个元素设置为 min-height:100% 它应该填充父元素。 320px 也来自内容，而不是任何 CSS。 Chrome 正在向您显示“显示”高度，而不是设定高度。
看看@micheal copeland。同样的原因。这就是 320px 的来源——最大的元素
也许更好的问题是：当 BODY 的高度为 320px 时，它的背景如何填充窗口。我们相信内容还是背景？
好吧，你将 min-height 设置为 100%，它会按内容进行

【解决方案7】：

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

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

【讨论】：

这根本无法回答“为什么”
使用 JavaScript 不太好。你说自己搞砸了，但这不应该是事实上的最佳方式。不喜欢它得到了正确的答案。
jquery 实在是太过分了。