CSS min-height屬性用法及代碼示例

它設置元素內容框的 minimum-height。這意味著內容框的高度可以大於 min-height 值，但不能更短。它設置元素高度的下限。

當內容小於最小高度時應用；否則，如果內容較大，則此屬性無效。該屬性確保 height 屬性的值不能小於 min-height 屬性的值。它不允許負值。

用法

min-height:none | length | initial | inherit;

此 CSS 屬性的值定義如下：

none:它是不限製內容框大小的默認值。

length:該值以 px、cm、pt 等為單位定義 min-height。其默認值為 0。

initial:它將屬性設置為其默認值。

inherit:它從其父元素繼承屬性。

現在，讓我們看一個使用此 CSS 屬性的示例。

示例

在這個例子中，有四個帶有內容的段落元素。我們使用 min-height 屬性的長度值定義這些段落的 minimum-height。第一段最小高度50px，第二段6em，第三段130pt，第四段5cm。

<!DOCTYPE html>
<html>
<head>
<title>
min-height property
</title>

<style>
p{
border:4px solid blue;
background-color:lightblue;
font-size:20px;
}
#px {
min-height:50px;
}
#em {
min-height:6em;

}
#pt {
min-height:130pt;

}
#cm {
min-height:5cm;

}
</style>
</head>
<body>
<h3> min-height:50px; </h3>
<p id = "px">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h3> min-height:6em; </h3>
<p id = "em">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h3> min-height:130pt; </h3>
<p id = "pt">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h3> min-height:5cm; </h3>
<p id = "cm">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>

</body>
</html>

輸出

相關用法

注：本文由純淨天空篩選整理自 CSS min-height property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。