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

打印页面