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: 百分比值
这是另一个示例，演示了 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>