CSS教程
CSS进阶

CSS min-height

它设置元素内容框的最小高度。这意味着内容框的高度可以大于 min-height 的值,但不能更短。
当内容小于最小高度时将应用该元素。否则,如果内容较大,则此属性无效。此属性可确保height属性的值不能小于 min-height 属性的值。它不允许负值。

语法

min-height: none | length | initial | inherit;
此CSS属性的值定义如下:
none:这是默认值,不限制内容框的大小。
length:此值定义最小高度(以px,cm,pt等为单位)。默认值为0。
initial:将属性设置为其默认值。
inherit:它从其父元素继承该属性。
现在,让我们来看一个使用示例此 CSS 属性。

示例

在此例如,内容包含四个段落元素。我们使用 min-height 属性的长度值定义这些段落的最小高度。第一段的最小高度为 50px ,第二段为 6em ,第三段为 130pt ,第四段为 5厘米
<!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 lidihuo.com. This site is developed so that students may learn computer science related technologies easily. The lidihuo.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 lidihuo.com. This site is developed so that students may learn computer science related technologies easily. The lidihuo.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 lidihuo.com. This site is developed so that students may learn computer science related technologies easily. The lidihuo.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 lidihuo.com. This site is developed so that students may learn computer science related technologies easily. The lidihuo.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属性
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4