height

Summary

height 指定元素内容区高度。内容区 content area 在元素padding, border, and margin 的里面。

min-height 与 max-height 覆盖 height.

初始值	`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 value computes to `auto`. A percentage height on the root element is relative to the initial containing block.
适用媒体	visual
计算值	a percentage or `auto` or the absolute length
Animation type	a length, percentage or calc();
正规顺序	the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

height: auto     /* auto keyword */

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

height: 75%      /* <percentage> values */

height: inherit

Values

<length>: 可用单位查看 <length>。
<percentage>: <percentage> 相对于元素的块容器高度。如果块容器的高度没有显式指定，计算值为 auto。 用在root 元素 (e.g. <html>) 上是相对于初始块容器（即显示器的尺寸）。
auto: 由浏览器计算确定。

Example

HTML

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

CSS

div {
  width: 250px;
  margin-bottom: 5px;
  border: 3px solid #999999;
}

#red {
  height: 50px;
}

#green {
  height: 25px;
}

#parent {
  height: 100px;
}

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

Specifications

Specification	Status	Comment
CSS Basic Box Model height	Working Draft	Added the `max-content`, `min-content`, `available`, `fit-content`, `border-box`, `content-box` keywords.
CSS Transitions height	Working Draft	Lists `height` as animatable.
CSS Level 2 (Revision 1) height	Recommendation	Adds support for the `<length>` values and precises on which element it applies to.
CSS Level 1 height	Recommendation	Initial specification.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.0 (1.7 or earlier)	4.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

height

Summary

Syntax

Values

Example

HTML

CSS

Specifications

Browser compatibility

See also

文档标签和贡献者