height

尝试一下

height: 150px;

height: 6em;

height: 75%;

height: auto;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box where you can change the height.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  justify-content: center;
  color: #ffffff;
}

min-height 和 max-height 属性会覆盖 height。

语法

/* Keyword value */
height: auto;

/* <length> values */
height: 120px;
height: 10em;

/* <percentage> value */
height: 75%;

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

值

<length>

将高度定义为一个绝对值。

<percentage>

将高度定义为相对包含块高度的百分比。

border-box

如果设置该值，则 <length> 或者 <percentage> 会设置为该元素的 border box。

content-box

如果设置该值，则 <length> 或者 <percentage> 会设置为该元素的 content box。

auto

由浏览器为元素计算并选择一个高度。

fill

根据文字方向，使用 fill-available 作为行大小或者块大小。

max-content

设置为允许的最大高度。

min-content

设置为允许的最小高度。

available

包含块高度减去当前元素的边距，边框和填充。

fit-content

将 fill-content 公式中的可用位置替换为特定的参数以进行使用，如：min(max-content, max(min-content, ))

Formal syntax

height = 
  auto                                      |
  <box-size>                                |
  <anchor-size()>                           |
  contain                                   |
  fit-content( <length-percentage [0,∞]> )  

<box-size> = 
  <length-percentage>  |
  stretch              |
  contain              |
  min-content          |
  max-content          |
  fit-content          |
  fit-content( )       |
  calc-size( )         

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

示例

HTML

<div id="taller">I'm 50 pixels tall.</div>
<div id="shorter">I'm 25 pixels tall.</div>
<div id="parent">
  <div id="child">I'm half the height of my parent.</div>
</div>

CSS

div {
  width: 250px;
  margin-bottom: 5px;
  border: 2px solid blue;
}

#taller {
  height: 50px;
}

#shorter {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}

结果

无障碍问题

确保设定了 height 的元素在显示上不会被截断，或者当页面放大时增大的字体大小不会遮挡其他内容。

• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

规范

浏览器兼容性

参见

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