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.
* Some parts of this feature may have varying levels of support.
尝试一下
当 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 |
---|---|
适用元素 | 适用于所有元素,但不包括非替换行级元素、表格列和列组 |
是否是继承属性 | 否 |
Percentages | The 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 |
浏览器兼容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
min-height | ||||||||||||
anchor-size() | ||||||||||||
auto | ||||||||||||
fit-content | ||||||||||||
fit-content() | ||||||||||||
max-content | ||||||||||||
min-content | ||||||||||||
stretch |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.