Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

min-height

概述

min-height属性用来设置给定元素的最小高度。如果height属性设置的高度比该属性设置的高度还小,则height属性会失效。

min-height会把max-height和 height的值都覆盖掉。

初始值0
适用元素all elements but non-replaced inline elements, table columns, and column groups
是否是继承属性
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.
适用媒体visual
计算值the percentage as specified or the absolute length
是否适用于 CSS 动画yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

 

/* <length> value */
min-height: 3.5em;

/* <percentage> value */
min-height: 10%;

/* Keyword values */
min-height: max-content;
min-height: min-content;
min-height: fit-content;
min-height: fill-available;

/* Global values */
min-height: inherit;
min-height: initial;
min-height: unset;

<length>
一个固定的最小高度. 查看<length>了解可用的长度单位。
<percentage>
<percentage>值是根据包含该元素的父元素的高度计算得来的,如果该元素的父元素没有明确的指定高度,则该百分比相当于0。
max-content
自身想要的高度。
min-content
自身最小的高度。
fill-available
包含的块的高度减去水平方向上的margin、border和padding。一些浏览器用一个古老的名字实现了这个关键字,available
fit-content
根据CSS3和模型,这个和min-content是同义词。CSS3尺寸计算方式定义了一个更复杂的算法呢,但是还没有浏览器实现,甚至连实验模式都没有。

正式语法

<length> | <percentage> | auto | max-content | min-content | fit-content | fill-available

例子

table { min-height: 75%; }

form { min-height: 0; }

举例说明

范例 状态 注释
CSS Intrinsic & Extrinsic Sizing Module Level 3
min-height
Working Draft Adds the max-contentmin-contentfit-content, andfill-available keywords.
Both CSS3 Box and CSS3 Writing Modes drafts defined at some point these keywords. These drafts are superseded by this spec.
CSS Flexible Box Layout Module
min-height
Candidate Recommendation An earlier revision of the spec added the auto keyword and used it as the initial value. The CSSWG subsequently resolved to revert this change, however. As of March 29, 2013, the latest Editor's Draft doesn't modify the min-width property anymore (i.e. it no longer introduces the auto value).
CSS Transitions
min-height
Working Draft Defines min-height as animatable.
CSS Level 2 (Revision 1)
min-height
Recommendation Initial definition.

 

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 7.0 7.0 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 6.0 6.0 1.0

相关链接

box model, min-width, box-sizing, height, max-height

文档标签和贡献者

 此页面的贡献者: Sebastianz, lazurey, ziyunfei
 最后编辑者: Sebastianz,