CSS - min-height 属性

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

可能的值

length − 任何长度单位。元素的高度值永远不能低于此值。默认值为 0。
percentage - 它以包含块高度的百分比设置元素的最小高度。
initial − 将 min-height 的值设置为默认值。
inherit − min-height 的值继承自其父值。

适用于

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

DOM 语法


object.style.minHeight = "50px"

CSS min-height 示例

以下示例演示了如何使用 min-height 属性设置元素的最小高度 -


<html>
	 	<head>
	 	 	 <style>
	 	 	 	 	 	 div.a {
	 	 	 	 	 	 	 	 	 	border: 2px solid red;
	 	 	 	 	 	 	 	 	 	min-height: 200px;
	 	 	 	 	 	 	 	 	 	width: 80%;
	 	 	 	 	 	 	 	 	 	overflow: auto;
	 	 	 	 	 	 	 	 	 	margin-bottom:5px;
	 	 	 	 	 	 	 	 	 }
	 	 	 	 	 	 div.b {
	 	 	 	 	 	 	 	 	 	border: 2px solid blue;
	 	 	 	 	 	 	 	 	 	min-height: 40%;
	 	 	 	 	 	 	 	 	 	overflow: auto;
	 	 	 	 	 	 	 	 	 	margin-bottom:5px;
	 	 	 	 	 	 	 	 	 }
	 	 	 	 	 	 div.c {
	 	 	 	 	 	 	 	 	 	border: 2px solid green;
	 	 	 	 	 	 	 	 	 	min-height: 20px;
	 	 	 	 	 	 	 	 	 	overflow: auto;
	 	 	 	 	 	 	 	 	 	margin-bottom:5px;
	 	 	 	 	 	 	 	 	 }
	 	 	 </style>
	 	</head>
	 	<body>
	 	 	 <div style="border:2px dashed black; margin-bottom:4px;">
	 	 	 	 	 	 <h2>min-height: 0 (default):</h2>
	 	 	 	 	 	 <p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p>
	 	 	 </div>
	 	 	 <div class="a">
	 	 	 	 	 	 <h2>min-height: 200px and width:80%</h2>
	 	 	 	 	 	 <p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p>
	 	 	 </div>
	 	 	 <div class="b">
	 	 	 	 	 	 <h2>min-height: 40%</h2>
	 	 	 	 	 	 <p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p>
	 	 	 </div>
	 	 	 <div class="c">
	 	 	 	 	 	 <h2>min-height: 20px (smaller than content)</h2>
	 	 	 	 	 	 <p>The min-height is smaller than the content, hence the property <i>min-height</i> has no effect.
	 	 	 	 	 	 	 	The <i>min-height</i> property in CSS is used to set the minimum height of an element.
	 	 	 	 	 	 	 	It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.
	 	 	 	 	 	 </p>
	 	 	 </div>
	 	</body>
</html>

本页