DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费信用额度！
在 CSS 中，min-height 属性用于设置指定元素的最小高度。min-height 属性始终会覆盖 height 和 max-height。作者可以使用任何 长度值，只要它们是正值即可。
.wrapper {
height: 100%; /* full height of the content box */
min-height: 20em; /* Will be AT LEAST 20em tall */
}
.wrapper {
height: 600px;
min-height: 400px; /* Will be AT LEAST 400px tall : overrides height */
}
.wrapper {
min-height: 400px; /* overrides height and max-height */
height: 200px;
max-height: 300px;
}如果任一值更大（height > min-height 或反之亦然），则最大的值将是渲染的值。min-height 属性将应用于除 非替换内联元素、表格列和列组（即 colgroup、col）之外的所有元素。
浏览器支持
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 全部 | 全部 | 全部 | 全部 | 全部 | 全部 |
| Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 全部 | 全部 | 全部 | 全部 | 59+ |
我认为浏览器支持表不准确……例如，根据 https://caniuse.cn/#feat=minmaxwh，Firefox 2+ 支持 min-height。
嗨，Chris，
我开发网站已经很多年了，并且认为你在开发方面是一个可靠的来源，干得好。
只是关于这一点的一个快速说明，不确定这种技术的“兼容性”如何，因为高度是设置盒子高度的属性，而 min-height 是次要属性。
据我所知，如果 min-height 大于高度，则容器将“溢出”其内容之外，并可能导致浏览器之间出现一些不一致。
我是否遗漏了什么或想得太多？
期待您的回复，
Mr Alexander
虽然看起来已经有五年了，但我仍然很高兴也很感谢找到这个 CSS 技巧，因为它解决了我在一个 html 网站页面上遇到的问题，即在使用 Firefox 或 MS Edge 时，其中一个页面在滚动到底部时无法显示文本，但在 Google Chrome 中却可以显示。有趣的是，我之前在一个或多个其他 html 页面上也遇到过类似的行为，通过修改外部 CSS 中的 padding 和 margin 属性值，我通过反复试验解决了这个问题。然而，这最终变得很麻烦，因为修改这些值最终导致一个页面可以正常显示，但另一个页面却不行，最终我被迫在剩下的 html 页面中使用内联 CSS 来覆盖外部 CSS 中提供的样式。然后，你猜怎么着，我的另一个网站页面开始出现类似的行为，在 FF 和 MS Edge 中查看时也会出现这种情况。然后，我按照本文所述，在外部 CSS 的一个部分添加了 min-height 属性，然后，问题就彻底解决了。
很棒的文章，
我只是想确认一下，您是否遇到过使用“vh”作为 min-height 值的问题。我有一个属性设置为“min-height: 100vh”，它忽略了 min-height 属性，但如果我使用像素值，它就可以正常工作。
我最终使用了 display: flex，它似乎起作用了，您对此有经验吗？
Luke
嗨，Sara，
在您的第一个代码示例中，您有
.wrapper {height: 600px;
min-height: 400px; /* 将至少为 20em 高：覆盖高度 */
}
以 px 指定 height 和 min-height 的好处是什么？为什么 min-height 后面的注释提到了 em？
嗨，David！当值以像素指定时，没有额外的好处——只是在集合中提供了一个示例，以表明接受不同的长度单位。如果设计要求固定高度在 400px 到 600px 之间，那么使用它们将是一个不错的选择。但是，您可能会看到相对或百分比单位，因为它们在响应式设计（以及其他方面）中具有灵活性。
哦，感谢您提醒我代码注释中的那个错别字！
min-height对我来说不起作用。我尝试了谁能帮我一下吗？