CSS参考手册
灵活的框布局 | Flexible Box Layout
平均高度 | min-height
该min-height CSS属性设置元素的最小高度。它防止使用的height属性值变得小于指定的值min-height。
/* <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;当最小高度大于最大高度或高度时, 元素的高度设置为 min 高度的值。
初始值 |
0 |
|---|---|
适用于 |
所有元素，但未被替换的内联元素，表列和列组 |
遗传 |
没有 |
百分比 |
百分比是根据生成的包含盒子的高度来计算的。如果包含块的高度没有明确指定（即，取决于内容高度），并且该元素没有被绝对定位，则将该百分比值视为0。 |
媒体 |
视觉 |
计算值 |
指定的百分比或绝对长度 |
动画类型 |
一个长度，百分比或者calc（）; |
规范的顺序 |
形式语法定义的独特的非模糊顺序 |
语法
值
<length>最小高度，表示为a <length>。负值使声明无效。
<percentage>最小高度，表示为<percentage>包含块的高度。负值使声明无效。
关键字值
auto弹性项目的默认最小高度，为其他布局提供比0更合理的默认值。
max-content内在的首选高度。
min-content内在的最小高度。
fill-available包含块的高度减去垂直边距，边框和填充。（请注意，一些浏览器为这个关键字实现了一个古老的名字available。）
fit-content根据CSS3 Box，这是一个同义词min-content。CSS3 Sizing定义了一个更复杂的算法，但是没有浏览器实现它，即使是以实验的方式。
形式语法
<length> | <percentage> | auto | max-content | min-content | fit-content | fill-available实例
table { min-height: 75%; }
form { min-height: 0; }规范
Specification |
Status |
Comment |
|---|---|---|
CSS Intrinsic & Extrinsic Sizing Module Level 3The definition of 'min-height' in that specification. |
Working Draft |
Adds the max-content, min-content, fit-content, and fill-available keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.) |
CSS Flexible Box Layout ModuleThe definition of 'min-height' in that specification. |
Candidate Recommendation |
Adds the auto keyword and uses it as the initial value. |
CSS TransitionsThe definition of 'min-height' in that specification. |
Working Draft |
Defines min-height as animatable. |
CSS Level 2 (Revision 1)The definition of 'min-height' in that specification. |
Recommendation |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
|---|---|---|---|---|---|---|
Basic support |
1.0 |
(Yes) |
3.0 (1.9) |
7.0 3 |
4.0 |
1.0 2.0.2 (416) for positioned elements |
applies to <table> 1 |
No support |
No support |
(Yes) |
No support |
(Yes) |
No support |
max-content, min-content, fit-content, and fill-available |
No support |
No support |
No support |
No support |
No support |
9 |
autoObsolete since Gecko 22 |
21.0 |
? |
16.0 (16.0) |
No support |
12.10 |
No support |
auto as initial valueObsolete since Gecko 22 |
21.0 |
? |
18.0 (18.0) |
No support |
12.10 |
No support |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
|---|---|---|---|---|---|---|
Basic support |
? |
(Yes) |
? |
? |
? |
9 |
灵活的框布局 | Flexible Box Layout相关
层叠样式表（ Cascading Style Sheets ）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
加载中,请稍侯......