CSS - max-height 属性



CSS max-height 属性用于设置元素高度的上限。

可能的值

  • none − 元素的高度没有限制。
  • <length> − 任何长度单位。元素的高度值永远不能超过此距离。
  • <percentage> - 将元素的高度限制为最多为包含块高度的此百分比。
  • initial − 将 max-height 的值设置为默认值。
  • inherit − max-height 的值继承自其父值。

适用于

所有 HTML 元素,但未替换的内联元素和表格元素除外。

DOM 语法


object.style.maxHeight = "50px"

CSS max-height - <length> 值

以下示例演示了 max-height: 40px 属性将元素的最大高度设置为 40px −


<html>
<head>
<style>
	 	p {
	 	 	 width:400px;
	 	 	 max-height:40px;
	 	 	 border:2px solid red;
	 	 	 padding:5px;
	 	 	 margin:10px;
	 	}
</style>
</head>
<body>
	 	<p>
	 	 	 This paragraph is 400px wide and maximum height is 40px.
	 	 	 Hence the border is not covering the entire text and
	 	 	 there is some part of text outside the border. This is
	 	 	 due to the max-height value set for p tag.
	 	</p>
</body>
</html>

CSS max-height - <percentage>值

这是另一个示例,演示了 max-height 中所有值的使用 -


<html>
<head>
<style>
	 	div.a {
	 	 	 max-height: 100px;
	 	 	 width: 80%;
	 	 	 overflow: auto;
	 	}
	 	div.b {
	 	 	 max-height: 70%;
	 	 	 width: 80%;
	 	 	 overflow: auto;
	 	}
	 	div.c {
	 	 	 max-height: inherit;
	 	 	 width: 80%;
	 	 	 overflow: auto;
	 	}
	 	div.d {
	 	 	 max-height: none;
	 	 	 width: 80%;
	 	 	 overflow: auto;
	 	}
</style>
</head>
<body>
	 	<div class="a">
	 	 	 	 	<h2>max-height: 100px and width:80%</h2>
	 	 	 	 	<p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is 100px.</p>
	 	</div>
	 	<div class="b">
	 	 	 	 	<h2>max-height: 70% and width:80%</h2>
	 	 	 	 	<p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is 70%.</p>
	 	</div>
	 	<div class="c">
	 	 	 	 	<h2>max-height: inherit and width:80%</h2>
	 	 	 	 	<p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is inherit.</p>
	 	</div>
	 	<div class="d">
	 	 	 	 	<h2>max-height: none and width:80%</h2>
	 	 	 	 	<p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is none.</p>
	 	</div>
</body>
	</html>