path: root/files/zh-tw/web/css/height/index.html

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

<h2 id="概要">概要</h2>

<p><strong><code>高度(height)</code></strong> 的 CSS 屬性指定了元素內容區域的高度。<a href="/en-US/docs/CSS/box_model#content">content area</a> 在元素的留白(padding)、邊框(border) 與 邊界(margin) 內。</p>

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

<p>{{cssinfo}}</p>

<h2 id="語法">語法</h2>

<pre class="brush:css">/* Keyword value */
height: auto;

/* &lt;length&gt; values */
height: 120px;
height: 10em;

/* &lt;percentage&gt; value */
height: 75%;

/* Global values */
height: inherit;
height: initial;
height: unset;
</pre>

<h3 id="值">值</h3>

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

<h3 id="正式語法">正式語法</h3>

{{csssyntax}}

<h2 id="範例">範例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div id="red"&gt;
  &lt;span&gt;I'm 50 pixels tall.&lt;/span&gt;
&lt;/div&gt;
&lt;div id="green"&gt;
  &lt;span&gt;I'm 25 pixels tall.&lt;/span&gt;
&lt;/div&gt;
&lt;div id="parent"&gt;
  &lt;div id="child"&gt;
    &lt;span&gt;I'm half the height of my parent.&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: 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%;
}
</pre>

<p>{{EmbedLiveSample('Example')}}</p>

<h2 id="規格">規格</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}</td>
   <td>{{Spec2('CSS3 Box')}}</td>
   <td>Added the <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code> keywords.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Lists <code>height</code> as animatable.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Adds support for the {{cssxref("&lt;length&gt;")}} values and precises on which element it applies to.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#height', 'height')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Initial definition</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
   <td>{{Spec2('CSS3 Sizing')}}</td>
   <td>Adds new sizing keywords for width and height.</td>
  </tr>
 </tbody>
</table>

<h2 id="瀏覽器兼容性">瀏覽器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>4.0</td>
   <td>7.0</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td>
   <td>{{CompatChrome(46.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1")}}</td>
   <td>6.0</td>
   <td>6.0</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(46.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td>{{CompatChrome(46.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/CSS/box_model">box model</a>, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}</li>
</ul>