Skip to main content

元素最小高度 min-height

Docs

min-height | MDN (mozilla.org)

CSS 属性 min-height 能够设置元素的最小高度。这样能够防止 height 属性的应用值小于 min-height 的值。

当 min-height 大于 max-height 或 height 时，元素的高度会设置为 min-height 的值。

min-height 和 max-height

在实际开发中，我们基本不用 min-height 和 max-height，因为高度一般都是由内容撑开的，一般不会设置固定的高度。

但是在一些特殊的场景下，我们可能会用到这两个属性，比如我们想要一个元素的高度是固定的，但是内容不够的时候，我们可以设置 min-height，这样就能保证元素的高度是固定的，不会因为内容不够而变小。

/* <长度> 数值 */
min-height: 3.5em;

/* <百分比> 数值 */
min-height: 10%;

/* 关键词 */
min-height: max-content;
min-height: min-content;
min-height: fit-content(20em);

/* 全局数值 */
min-height: inherit;
min-height: initial;
min-height: unset;

取值​

和 min-width 基本一样。

语法​

min-height =
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )

<length-percentage> =
  <length>      |
  <percentage>

示例​

Loading Github Gist ...