CSS - height 屬性

CSS 的 height 屬性指定元素的高度。它決定了元素的高度，影響了它在文件中的佈局和定位。該屬性可以應用於塊級元素、內聯塊級元素以及替換元素（如影像）。

語法

height: auto | length | percentage | min-content | max-content | initial | inherit;

屬性值

值	描述
auto	元素根據其內容擴充套件或收縮。預設值。
長度	使用長度單位（例如 px、em、rem 等）為元素設定固定高度。
百分比	將高度設定為其包含塊高度的百分比。
min-content	使元素的高度適應其內容所需的最小高度，防止內容溢位。
max-content	調整元素高度以適應最高內容，而無需換行或截斷。
initial	將屬性設定為其預設值。
inherit	從父元素繼承該屬性。

CSS Height 屬性示例

以下示例說明了使用不同值的 height 屬性。

使用 Auto 值的 Height 屬性

要使元素的高度取決於其內容的長度，我們使用 auto 值。以下示例中顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .outer {
         background-color: lightgrey;
         height: 200px;
         padding: 10px;
         box-sizing: border-box;
      }

      .inner {
         text-align: center;
         border: 2px solid;
         background-color: lightblue;
         height: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS height property
   </h2>
   <h4>
      height: auto
   </h4>
   <div class="outer">
      <div class="inner">
         This div is having auto height. 
         The height of this div depends on the content.
      </div>
   </div>

</body>

</html>

使用長度值的 Height 屬性

要為元素設定固定高度，我們使用長度單位（例如 px、em、rem 等）。如果元素的內容大於元素的大小，則元素將具有固定高度，並且會發生溢位。以下示例中顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .outer {
         background-color: lightgrey;
         height: 200px;
         padding: 10px;
         box-sizing: border-box;
      }

      .inner {
         text-align: center;
         border: 2px solid;
         background-color: lightblue;
      }

      .inner1 {
         height: 40px;
      }

      .inner2 {
         height: 90px;
      }
   </style>
</head>

<body>
   <h2>
      CSS height property
   </h2>
   <h4>
      height: 40px 90px
   </h4>
   <div class="outer">
      <p class="inner inner1">
         This paragraph is having 40px height.
      </p>
      <p class="inner inner2">
         This paragraph is having 90px height.
      </p>
   </div>

</body>

</html>

使用百分比值的 Height 屬性

要為元素設定固定高度，我們使用百分比值（例如 10%、20% 等）。元素的高度相對於其包含塊的高度。如果元素的內容大於大小，則會發生溢位。以下示例中顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .outer {
         background-color: lightgrey;
         height: 300px;
         padding: 10px;
         box-sizing: border-box;
      }

      .inner {
         text-align: center;
         border: 2px solid;
         background-color: lightblue;
      }

      .inner1 {
         height: 30%;
      }

      .inner2 {
         height: 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS height property
   </h2>
   <h4>
      height: 30% 50%
   </h4>
   <div class="outer">
      <p class="inner inner1">
         This paragraph is having 30% 
         height of the outer container.
      </p>
      <p class="inner inner2">
         This paragraph is having 50% 
         height of the outer container.
      </p>
   </div>

</body>

</html>

使用 Min Content 值的 Height 屬性

要將元素高度設定為適應其內容所需的最小大小以防止溢位，我們使用 min-content 值。這確保高度足以在一行中顯示內容，而無需換行或截斷。以下示例中顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .outer {
         background-color: lightgrey;
         height: 200px;
         padding: 10px;
         box-sizing: border-box;
      }

      .inner {
         text-align: center;
         border: 2px solid;
         background-color: lightblue;
         height: min-content;
      }
   </style>
</head>

<body>
   <h2>
      CSS height property
   </h2>
   <h4>
      height: min-content
   </h4>
   <div class="outer">
      <p class="inner ">
         TutorialsPoint is an online educational
         platform offering a vast range of tutorials
         and courses on programming, web development, 
         data science, and other technical subjects, 
         featuring detailed guides and interactive
         content.
      </p>
   </div>

</body>

</html>

使用 Max Content 值的 Height 屬性

要調整元素高度以適應其中的最高內容，我們使用 max-content。高度會擴充套件以適應最大的專案或內容，確保沒有內容被切斷或換行。以下示例中顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .outer {
         background-color: lightgrey;
         height: 200px;
         padding: 10px;
         box-sizing: border-box;
      }

      .inner {
         text-align: center;
         border: 2px solid;
         background-color: lightblue;
         height: max-content;
      }
   </style>
</head>

<body>
   <h2>
      CSS height property
   </h2>
   <h4>
      height: max-content
   </h4>
   <div class="outer">
      <p class="inner ">
         TutorialsPoint is an online educational
         platform offering a vast range of tutorials
         and courses on programming, web development, 
         data science, and other technical subjects, 
         featuring detailed guides and interactive 
         content.
      </p>
   </div>

</body>

</html>

支援的瀏覽器

屬性
height	1.0	4.0	1.0	1.0	7.0

css_properties_reference.htm

列印頁面