CSS - Height 属性_CSS 菜鸟教程

height 属性设置元素的内容区域的高度。如果将 box-sizing 设置为 border-box，则属性 height 将设置边框区域的高度。

height 属性指定的值由 min-height 和 max-height 属性定义的值提供 oevrriden。

可能的值

length − 特定的长度值，例如像素（px）、厘米（cm）、英寸（in）等。
percentage − 包含元素高度的百分比。
auto - 浏览器将根据内容自动计算高度。这是默认值。
max-content: 定义固有的首选高度。
min-content: 定义固有的最小高度。
fit-content:箱子将使用可用空间，但绝不会超过 max-content。
fit-content (<length-percentage>):使用拟合含量公式，即 min（max-content， max（min-content， <length-percentage>））。
clamp(): 允许在最小高度和最大高度之间指定的值范围内选择中间值。

不接受 height： -200px 等负值。

适用于

除未替换的内联元素、表列和列组之外的所有 HTML 元素。

DOM 语法

object.style.height = "100px";

CSS 高度 - 长度单位

下面是一个以长度单位向 div 元素添加高度的示例：

<html>
<head>
<style>
	 	div {
	 	 	 border: 1px solid black;
	 	 	 margin-bottom: 5px;
	 	}
	 	div.a {
	 	 	 height: 100px;
	 	 	 background-color: rgb(230, 230, 203);
	 	}
	 	div.b {
	 	 	 height: 2.5in;
	 	 	 background-color: rgb(230, 230, 203);
	 	}
</style>
</head>
<body>
	 	<div class="a">This div element has a height of 100px.</div>
	 	<div class="b">This div element has a height of 2.5 inches.</div>
</body>
</html>

CSS 高度 - 百分比值

下面是一个以百分比值为单位向 div 元素添加高度的示例：

<html>
<head>
<style>
	 	div {
	 	 	 border: 1px solid black;
	 	 	 margin-bottom: 5px;
	 	}
	 	div.a {
	 	 	 height: 80%;
	 	 	 background-color: rgb(230, 230, 203);
	 	}
	 	div.b {
	 	 	 height: 120%;
	 	 	 background-color: rgb(236, 190, 190);
	 	}
</style>
</head>
<body>
	 	<div class="a">This div element has a height of 80%.</div>
	 	<div class="b">This div element has a height of 120%.</div>
</body>
</html>

CSS 高度 - 自动值

下面是一个向设置为 auto 的 div 元素添加高度的示例：

<html>
<head>
<style>
	 	div.auto {
	 	 	 height: auto;
	 	 	 background-color: yellow;
	 	 	 padding: 20px;
	 	 	 margin-bottom: 5px;
	 	}
</style>
</head>
<body>
	 	<div class="auto">This div element has a height set as auto.</div>
</body>
</html>

CSS 高度 - 使用 max-content 和 min-content

下面是一个高度等于 max-content 和 min-content 的示例：

<html>
<head>
<style>
	 	div {
	 	 	 border: 1px solid black;
	 	 	 margin-bottom: 5px;
	 	}
	 	div.c {
	 	 	 height: max-content;
	 	 	 background-color: bisque;
	 	}
	 	div.d {
	 	 	 height: min-content;
	 	 	 background-color: darkseagreen;
	 	}
</style>
</head>
<body>
	 	<div class="c">This div element has a height as max-content. This div element has a height as max-content.
	 	This div element has a height as max-content. This div element has a height as max-content. This div element has a height as max-content.</div>
	 	<div class="d">This div element has a height of min-content.</div>
</body>
</html>

CSS 高度 - 图像

以下是向图像添加高度的示例：

<html>
<head>
<style>
	 	.demoImg {
	 	 	 margin-top: 15px;
	 	 	 height: 200px;
	 	 	 margin-right: 0.5in;
	 	}
</style>
</head>
<body>
	 	<img class="demoImg" src="images/scancode.png" alt="image-height">
</body>
</html>

CSS 高度 - 使用 clamp（）

以下是使用 clamp（）函数设置高度的示例：

<html>
<head>
<style>
	 	p{
	 	 	 display: inline-flex;
	 	 	 border: 1px solid black;
	 	 	 background-color: yellow;
	 	 	 height: clamp(20px, 100px, 180px);
	 	 	 width: clamp(50px, 100px, 200px);
	 	 	 padding: 1em;
	 	 	 margin: 2em;
	 	}
</style>
<body>
	 	<div>
	 	 	 <p>The clamp function is used for height & width, where the background color is selected for the value between the
	 	 	 min and max ranges of height and width.</p>
	 	</div>
</body>
</html>

CSS 高度 - 相关属性

以下是高度的相关 CSS 属性列表：

属性	值
max-height	设置元素高度的上限。
min-height	设置元素高度的下限。
min-content	设置内容的固有最小高度。
max-content	设置内容的固有最大高度。
fit-content	根据可用大小适合内容。
fit-content()	根据公式 min（maximum size， max（minimum size， argument））夹紧给定大小。

<< CSS - translate 属性 CSS - hyphenate-character 属性 >>