CSS - min-height 屬性

CSS min-height 屬性指定元素的最小高度。它確保元素不會小於定義的值，而不管其內容如何。如果內容超過指定的最小高度，則元素會增長以適應內容。

語法

min-height: length | percentage | initial | inherit;

屬性值

值	描述
長度	使用長度單位（例如 px、em、rem 等）設定元素的最小高度。預設值為 0。
百分比	使用相對於容器大小的百分比值（例如 10%）設定元素的最小高度。
initial	將其屬性設定為預設值。
inherit	它從父元素繼承屬性。

CSS Min Height 屬性示例

以下示例解釋了具有不同值的min-height 屬性。

使用長度值的最小高度屬性

要設定元素高度的最小限制，我們可以使用長度單位（例如 px、em、rem 等）指定最小高度值。如果內容小於min-height，則效果可見。如果內容大於min-height，則元素會增長以適應內容。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>
<head>
      <style>
            .container {
                  padding: 5px;
                  background-color: lightgreen;
            }

            .ex1 {
                  min-height: 120px;
            }

            .ex2 {
                  min-height: 2em;
            }
      </style>
</head>
<body>
      <h2>
            CSS min-height property
      </h2>
      <h4>
            min-height: 120px (the minimum height is 
            135px, the content is smaller than the 
            min-height so space is visible. )
      </h4>
      <div class="container ex1">
            TutorialsPoint is an online platform offering free 
            tutorials and resources on various topics including 
            programming, web development, and data science. It 
            provides structured lessons, examples, and quizzes 
            for effective learning.
      </div>
      <br/>
      <h4>
            min-height: 2em (the minimum height is 2em, 
            in the following example content is greater 
            than the defined height, so the box grows in size)
      </h4>
      <div class="container ex2">
            TutorialsPoint is an online platform offering free 
            tutorials and resources on various topics including 
            programming, web development, and data science. It 
            provides structured lessons, examples, and quizzes 
            for effective learning.
      </div>
</body>
</html>

使用百分比值的最小高度屬性

要設定元素高度的最小限制，我們可以使用相對於包含元素大小的百分比值（例如 10%）指定最小高度值。如果內容小於min-height，則空間可見。如果內容大於min-height，則元素會增長以容納內容。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>
<head>
      <style>
            .outer-container {
                  height: 100px;
                  padding: 5px;
            }

            .inner-container {
                  width: 100%;
                  height: 100%;
                  position: relative;

            }

            .color {
                  background-color: lightgreen;
            }

            .ex1 {
                  min-height: 55%;
            }

            .ex2 {
                  min-height: 105%;
            }
      </style>
</head>
<body>
      <h2>
            CSS min-height property
      </h2>
      <h4>
            min-height: 55% (the minimum height is 55% 
            of the inner-container's height, as the content 
            is larger than the min-height in this case, 
            the box grows)
      </h4>
      <div class="outer-container">
            <div class="inner-container">
                  <div class="ex1 color">
                  TutorialsPoint is an online platform offering 
                  free tutorials and resources on various topics 
                  including programming, web development, and data
                  science. It provides structured lessons, 
                  examples, and quizzes for effective learning.
                  </div>
            </div>
      </div>
      <br/>
      <h4>
            min-height: 115% (the minimum height is 115% 
            of the inner-container's height, the content 
            is smaller than the min-height so there is space.)
      </h4>
      <div class="outer-container">
            <div class="inner-container">
                  <div class="ex2 color">
                  TutorialsPoint is an online platform offering 
                  free tutorials and resources on various topics 
                  including programming, web development, and data
                  science. It provides structured lessons, 
                  examples, and quizzes for effective learning.
                  </div>
            </div>
      </div>
</body>
</html>

支援的瀏覽器

屬性
min-height	1.0	7.0	3.0	2.0.2	4.0

css_properties_reference.htm

列印頁面