CSS - height 属性
CSS height 属性用于指定元素的 height。它决定了元素的高度，从而影响其在文档中的布局和定位。该属性可应用于块级元素、内联块元素以及替换元素（如图像）。
语法
height: auto | length | percentage | min-content | max-content | initial | inherit;
属性值
| 值 | 描述 |
|---|---|
| auto | 元素根据其内容自动扩展或收缩。默认值。 |
| length | 使用长度单位（例如 px、em、rem 等）为元素设置固定高度。 |
| percentage | 将高度设置为元素包含块高度的百分比。 |
| 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 属性
</h2>
<h4>
height: auto
</h4>
<div class="outer">
<div class="inner">
这个 div 具有 auto 高度。
这个 div 的高度取决于内容。
</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 属性
</h2>
<h4>
height: 40px 90px
</h4>
<div class="outer">
<p class="inner inner1">
这个段落具有 40px 高度。
</p>
<p class="inner inner2">
这个段落具有 90px 高度。
</p>
</div>
</body>
</html>
使用百分比值的 Height 属性
要为元素设置固定高度，我们使用百分比值（例如 10%、20% 等）。元素的 height 将相对于其包含块的高度。如果元素的内容超过该大小，将发生 overflow。本例中展示了这种情况。
示例
<!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 属性
要将元素高度设置为适合其内容的最小尺寸而不发生 overflow，我们使用 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 ">
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 属性
要调整元素高度以适应其中最高的 content，我们使用 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 ">
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>
支持的浏览器
| Property |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| height | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
css_reference.htm