min-height

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

尝试一下

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

语法

css
/* <长度> 数值 */
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;

Values

<length>

定义 min-height 为一个绝对数值。

<percentage>

定义 min-height 为一个相对于父容器高度的百分数。

auto

浏览器将通过计算为指定元素选择一个 min-height 值。

max-content

The intrinsic preferred min-height.

min-content

The intrinsic minimum min-height.

fit-content(<length-percentage>)

Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)).

Formal definition

初始值auto
适用元素适用于所有元素，但不包括非替换行级元素、表格列和列组
是否是继承属性否
PercentagesThe percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.
计算值the percentage as specified or the absolute length
动画类型a length, percentage or calc();

Formal syntax

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

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

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <intrinsic-size-keyword>  |
  <calc-size()>             |
  any                       |
  <calc-sum>                

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

示例

Setting min-height

css
table {
  min-height: 75%;
}

form {
  min-height: 0;
}

规范

Specification
CSS Box Sizing Module Level 3
# width-height-keywords
CSS Box Sizing Module Level 4
# sizing-values

浏览器兼容性

BCD tables only load in the browser

相关链接