📌  相关文章
📜  HTML | DOM 样式 maxHeight 属性(1)

📅  最后修改于: 2023-12-03 15:31:13.569000             🧑  作者: Mango

HTML | DOM 样式 maxHeight 属性

maxHeight 属性用于设置元素的最大高度。

语法
object.style.maxHeight="height|initial|inherit"
  • height: 可设置具体的高度值，比如 100px，50% 等。如果设置的高度值超过最大高度，元素的高度将被设置为最大高度。如果 height 属性也被设置，maxHeight 属性将覆盖 height 属性。
  • initial: 将属性重置为它的默认值。
  • inherit: 规定应该从父元素继承该属性的值。
实例

下面是一个例子，当高度超过 100px 时，元素的高度将被设置为 100px：

<!DOCTYPE html>
<html>
<head>
	<title>maxHeight</title>
	<style>
		#box {
			background-color: #f0f0f0;
			max-height: 100px;
			overflow: auto;
		}
	</style>
</head>
<body>
	<div id="box">
		<p>这是一个文本框，它具有最大高度。</p>
		<p>当文本超过最大高度时，</p>
		<p>将产生滚动条。</p>
		<p>这是另一个段落。</p>
		<p>这是一个更长的段落，以使滚动条可见。</p>
	</div>
</body>
</html>

输出结果如下：

maxHeight

总结

maxHeight 属性可以用于控制元素的最大高度。当元素的高度超出最大高度时，将产生滚动条。这个属性非常适用于需要限制元素高度的情况，如可滚动文本框或列表等。