height

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

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

min-height 與 max-height 的特性比 height 更重要。

預設值	`auto`
適用於	所有元素，除了非替換的行內元素、表格行和行群組
繼承與否	否
百分比	百分比根據產生方塊所包含區塊的高度計算。如果包含區塊的高度沒有明確指定（即取決於內容高度），且此元素非絕對定位，則計算值為 `auto`。根元素的百分比高度相對於初始包含區塊。
Computed value	百分比、`auto` 或絕對長度
動畫類型	a length，百分比或 calc();

語法

css

/* Keyword value */
height: auto;

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

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

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

值

<length>

查看 <length> 可用的單位。

<percentage>

<percentage> 相對於元素的塊狀高度。如果沒有指定塊狀元素的高度，預設值為 auto。用在 root 元素 (e.g. <html>) 上是相對於初始塊狀元素（即顯示器的尺寸）。

border-box 實驗性質

If present, the preceding <length> or <percentage> is applied to the element's border box.

content-box 實驗性質

<length> 或 <percentage> 是應用於元素的 content box.

auto

瀏覽器將計算並選擇指定元素的高度。

fill 實驗性質

Use the fill-available inline size or fill-available block size, as appropriate to the writing mode.

max-content 實驗性質

The intrinsic preferred height.

min-content 實驗性質

The intrinsic minimum height.

available 實驗性質

The containing block height minus vertical margin, border and padding.

fit-content 實驗性質

The larger of:

the intrinsic minimum height
the smaller of the intrinsic preferred height and the available height

正式語法

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

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

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

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

<calc-size-basis> = 
  <size-keyword>  |
  <calc-size()>   |
  any             |
  <calc-sum>      

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

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

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

範例

HTML

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

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

規範

Specification
CSS Box Sizing Module Level 3 # preferred-size-properties
CSS Box Sizing Module Level 4 # sizing-values

瀏覽器兼容性

參見

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

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年11月10日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content