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>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
min-height 1.0 7.0 3.0 2.0.2 4.0
css_properties_reference.htm
广告