min-height - CSS（层叠样式表） 编辑

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

当 min-height 大于 max-height 或 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;

Values

<length>

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

<percentage>

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

auto

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

none

不限制盒容器的尺寸。

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
适用元素	all elements but non-replaced inline elements, table columns, and column groups
是否是继承属性	否
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
Animation type	a length, percentage or calc();

Formal syntax

auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)
where 
<length-percentage> = <length> | <percentage>

示例

Setting min-height

table { min-height: 75%; }

form { min-height: 0; }

规范

Specification	Status	Comment
CSS Box Sizing Module Level 4 min-height	Editor's Draft
CSS Box Sizing Module Level 3 min-height	Working Draft	Adds the max-content, min-content, fit-content keywords.
CSS Level 2 (Revision 1) min-height	Recommendation	Initial definition.

浏览器兼容性

BCD tables only load in the browser

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.

相关链接

• The box model, box-sizing
• height, max-height