在此页

• 句法
• 可访问性关注
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

height CSS property specifies the height of an element. By default, the property defines the height of the content area 。若 box-sizing is set to border-box , however, it instead determines the height of the border area .

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

min-height and max-height properties override height .

句法

/* Keyword value */
height: auto;
/* <length> values */
height: 120px;
height: 10em;
/* <percentage> value */
height: 75%;
/* Global values */
height: inherit;
height: initial;
height: unset;
				

值

<length>

Defines the height as an absolute value.

<percentage>

Defines the height as a percentage of the containing block's height.

auto

The browser will calculate and select a height for the specified element.

max-content

The intrinsic preferred height.

min-content

The intrinsic minimum height.

fit-content( <length-percentage> )

Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, )).

可访问性关注

Ensure that elements set with a height are not truncated and/or do not obscure other content when the page is zoomed to increase text size.

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

形式定义

初始值	auto
适用于	all elements but non-replaced inline elements, table columns, and column groups
继承	no
百分比	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.
计算值	a percentage or auto or the absolute length
动画类型	a length , percentage or calc();

形式句法

auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)
where 
<length-percentage> = <length> | <percentage>
					

范例

Setting height using pixels and percentages

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%;
}
					

结果

规范

规范	状态	注释
CSS Box Sizing Module Level 4 The definition of 'height' in that specification.	编者草案
CSS Box Sizing Module Level 3 The definition of 'height' in that specification.	工作草案	添加 max-content , min-content , fit-content keywords.
CSS Level 2 (Revision 1) The definition of 'height' in that specification.	推荐	Adds support for the <length> values and precises on which element it applies to.
CSS Level 1 The definition of 'height' in that specification.	推荐	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
height	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 4	Opera 完整支持 7	Safari 完整支持 1	WebView Android 完整支持 1	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 10.1	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
fit-content	Chrome 完整支持 46	Edge 完整支持 79	Firefox 不支持 No	IE 不支持 No	Opera 完整支持 33	Safari 完整支持 11	WebView Android 完整支持 46	Chrome Android 完整支持 46	Firefox Android 不支持 No	Opera Android 完整支持 33	Safari iOS 完整支持 11	Samsung Internet Android 完整支持 5.0
max-content	Chrome 完整支持 46	Edge 完整支持 79	Firefox 完整支持 66 完整支持 66 完整支持 3 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE 不支持 No	Opera 完整支持 44	Safari 完整支持 11	WebView Android 完整支持 46	Chrome Android 完整支持 46	Firefox Android 完整支持 66 完整支持 66 完整支持 4 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android 完整支持 43	Safari iOS 完整支持 11	Samsung Internet Android 完整支持 5.0
min-content	Chrome 完整支持 46	Edge 完整支持 79	Firefox 完整支持 66 完整支持 66 完整支持 3 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE 不支持 No	Opera 完整支持 44	Safari 完整支持 11	WebView Android 完整支持 46	Chrome Android 完整支持 46	Firefox Android 完整支持 66 完整支持 66 完整支持 4 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android 完整支持 43	Safari iOS 完整支持 11	Samsung Internet Android 完整支持 5.0
stretch	Chrome 完整支持 28 Alternate Name 完整支持 28 Alternate Name Alternate Name Uses the non-standard name: -webkit-fill-available	Edge 完整支持 79 Alternate Name 完整支持 79 Alternate Name Alternate Name Uses the non-standard name: -webkit-fill-available	Firefox 不支持 No	IE 不支持 No	Opera 完整支持 15 Alternate Name 完整支持 15 Alternate Name Alternate Name Uses the non-standard name: -webkit-fill-available	Safari 完整支持 9 Alternate Name 完整支持 9 Alternate Name Alternate Name Uses the non-standard name: -webkit-fill-available	WebView Android 完整支持 4.4 Alternate Name 完整支持 4.4 Alternate Name Alternate Name Uses the non-standard name: -webkit-fill-available	Chrome Android 完整支持 28 Alternate Name 完整支持 28 Alternate Name Alternate Name Uses the non-standard name: -webkit-fill-available	Firefox Android 不支持 No	Opera Android 完整支持 15 Alternate Name 完整支持 15 Alternate Name Alternate Name Uses the non-standard name: -webkit-fill-available	Safari iOS 完整支持 9 Alternate Name 完整支持 9 Alternate Name Alternate Name Uses the non-standard name: -webkit-fill-available	Samsung Internet Android 完整支持 5.0 Alternate Name 完整支持 5.0 Alternate Name Alternate Name Uses the non-standard name: -webkit-fill-available

图例

完整支持

完整支持

不支持

不支持

使用非标名称。

使用非标名称。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

• The box model , box-sizing
• max-height , min-height
• The mapped logical properties: block-size , inline-size

元数据

• 最后修改： 2020 年 7 月 17 日

相关话题

1. CSS
2. CSS 参考
3. CSS Box Model
4. 指南

   1. CSS 基本 Box 模型介绍
   2. Mastering margin collapsing
5. 特性

   1. height
   2. margin-bottom
   3. margin-left
   4. margin-right
   5. margin-top
   6. margin-trim
   7. max-height
   8. max-width
   9. min-height
   10. min-width
   11. overscroll-behavior
   12. overscroll-behavior-block
   13. overscroll-behavior-inline
   14. overscroll-behavior-x
   15. overscroll-behavior-y
   16. padding
   17. padding-bottom
   18. padding-left
   19. padding-right
   20. padding-top
   21. visibility
   22. width