CSS 速成：最小高度

什么是 CSS Quickes？

我开始在 Instagram 上向我亲爱的社群提问：“哪些 CSS 属性让你们感到困惑？”

在“CSS速成”系列中，我将深入讲解一个CSS属性。这些都是社区成员要求讲解的属性。如果你对某个CSS属性也有疑问，欢迎在Instagram、Twitter或下方评论区留言！我会解答所有问题。

让我们来谈谈min-heightCSS

有时候，你并不想给height元素设置固定高度。我甚至认为，在响应式和自适应设计中，大多数情况下都不应该设置固定高度。你不再需要设置固定高度了height。但是，你仍然需要确保元素有最小高度。这就是你需要min-height属性的原因。

如何使用它

如果你曾经使用过height，你也知道如何使用min-height。
以下是一些示例：

span{
  min-height: 250px;
  min-height: 50%;
  min-height: 100vh;
  min-height: inherit;
}

你可以使用所有你熟悉且喜欢的数值。但是它是如何工作的？如果你同时height在同一个元素上设置了 `max-height` 或 `max-height` 属性，会发生什么？

通常min-height情况下，`min-height` 会优先于 `min-height`height和 ` min- max-heightheight`。它能防止内容的高度小于设定值。由于初始值为 `0` 0，min-height`min-height` 对元素本身没有任何作用，或者更准确地说，`min-height` 为 `0` 0，而元素的高度不能小于 0。说到`min-height` 0，min-height它不能为负值。

我创建了一个小例子codepen来说明这一点，你也可以看到使用固定高度和给出max-height固定值会带来一些问题。

另一个优点是它可以制作动画！这里有一个例子。

实验值

您常用的尺寸值在所有浏览器上都受支持，甚至包括移动版 Safari（也就是新版 IE6） ;)

CSS3 规范还添加了一些新值，但并非所有浏览器都支持这些值。由于情况一直在变化，您应该查看caniuse。其中一个支持度较低的值是min-height: stretch。

一般来说，请不要在生产代码中使用这些函数！支持它们的浏览器厂商数量不够多，而且它们很容易被弃用！

• 可用或已填满
  • 高度等于包含块的高度减去当前元素的边距、边框和内边距。
• 最小含量
  • min-content它占用不溢出内容所需的最小空间，但如果空间足够，它会变大。
• 最大内容
  • max-content如果父元素足够高，它只会占用显示其内容所需的空间。因此，如果父元素较高，它的高度不会超过父元素的高度。
• 合适的内容
  • 与……相同min-content。
• 包含浮点数
  • 与 相同min-content，但会包含浮点数。

这里有一个包含这些值的 Codepen 示例，但请注意，它可能无法在您的浏览器上完全正常运行。

再次提醒：请勿在 2019 年底之前在生产代码中使用此代码。

👋你好！ Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube