max-height

max-height 规定元素设置最大高度，且能阻止height属性的设置值比max-height大。

max-height 可覆盖 height ， min-height 可覆盖 max-height。

 

语法

/* <length> value */
max-height: 2.5em;

/* <percentage> value */
max-height: 95%;

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

值

值描述
<length>此关键词指定一个固定的最大高度。
<percentage>此关键词表示相当于包含该元素的块的高度(即相当于该块的百分比)。若块未明确的指定高度，则该百分比相当于none
none 此关键词表示不限制高度。
max-content 此关键词表示内在的最大高度。
min-content 此关键词表示内在的最小高度。
fill-available 此关键词表示包含的块的高度减去水平方向上的 margin 、 border 和 padding。
fit-content 此关键词表示内在的最大高度。

例子

HTML 

<div id="red">
    Hudaokeji.
</div>

CSS 

#red {
     width: 200px;
     max-height: 300px;
     margin: auto;
     background: red;
     text-align: center;
}

执行结果

Hudaokeji.

参考

相关页面

外部链接


跳至内容顶部