--- title: height slug: Web/CSS/height translation_of: Web/CSS/height ---
{{CSSRef}}

概要

高度(height) 的 CSS 屬性指定了元素內容區域的高度。content area 在元素的留白(padding)、邊框(border) 與 邊界(margin) 內。

{{cssxref("min-height")}} 與 {{cssxref("max-height")}} 的特性比 {{Cssxref("height")}} 更重要。

{{cssinfo}}

語法

/* Keyword value */
height: auto;

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

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

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

值

<length>
查看 {{cssxref("<length>")}} 可用的單位。
<percentage>
{{cssxref("<percentage>")}} 相對於元素的塊狀高度。如果沒有指定塊狀元素的高度，預設值為 auto。用在 root 元素 (e.g. <html>) 上是相對於初始塊狀元素（即顯示器的尺寸）。
border-box {{experimental_inline}}
If present, the preceding {{cssxref("<length>")}} or {{cssxref("<percentage>")}} is applied to the element's border box.
content-box {{experimental_inline}}
{{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 是應用於元素的 content box.
auto
瀏覽器將計算並選擇指定元素的高度。
fill {{experimental_inline}}
Use the fill-available inline size or fill-available block size, as appropriate to the writing mode.
max-content {{experimental_inline}}
The intrinsic preferred height.
min-content {{experimental_inline}}
The intrinsic minimum height.
available {{experimental_inline}}
The containing block height minus vertical margin, border and padding.
fit-content {{experimental_inline}}
The larger of:

正式語法

{{csssyntax}}

範例

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

{{EmbedLiveSample('Example')}}

規格

Specification Status Comment
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}} {{Spec2('CSS3 Box')}} Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}} {{Spec2('CSS3 Transitions')}} Lists height as animatable.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}} {{Spec2('CSS2.1')}} Adds support for the {{cssxref("<length>")}} values and precises on which element it applies to.
{{SpecName('CSS1', '#height', 'height')}} {{Spec2('CSS1')}} Initial definition
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}} {{Spec2('CSS3 Sizing')}} Adds new sizing keywords for width and height.

瀏覽器兼容性

{{CompatibilityTable}}

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{CompatVersionUnknown}} {{CompatGeckoDesktop("1")}} 4.0 7.0 1.0
fill, fit-content, min-content, max-content {{CompatChrome(46.0)}} {{CompatUnknown}}        
Feature Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support 1.0 {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatGeckoMobile("1")}} 6.0 6.0 1.0 {{CompatVersionUnknown}}
fill, fit-content, min-content, max-content {{CompatUnknown}} {{CompatChrome(46.0)}} {{CompatUnknown}}         {{CompatChrome(46.0)}}

See also