此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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 2015年7月.
* Some parts of this feature may have varying levels of support.
CSS 属性min-height 能够设置元素的最小高度。这样能够防止height 属性的应用值小于min-height 的值。
尝试一下
min-height: 150px;min-height: 7em;min-height: 75%;min-height: 10px;<section> <div> This is a box where you can change the minimum height. <br />If there is more content than the minimum the box will grow to the height needed by the content. </div></section>#example-element { display: flex; flex-direction: column; background-color: #5b6dcd; justify-content: center; color: #ffffff;}当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-contentThe intrinsic preferred
min-height.min-contentThe intrinsic minimum
min-height.fit-content(<length-percentage>)Uses the
fit-contentformula 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 as0. |
| 计算值 | the percentage as specified or the absolute length |
| 动画类型 | alength,percentage or calc(); |
Formal syntax
min-height =
auto|
<length-percentage [0,∞]>|
min-content|
max-content|
fit-content(<length-percentage [0,∞]>)|
<calc-size()>|
<anchor-size()>|
stretch|
fit-content|
contain
<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> =
<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 4 # sizing-values |