css min-height属性设置元素最小高度

原创 国哥笔记  2019-03-03 18:04  阅读 563 views 次

min-height属性定义及用法

在css中,min-height属性是使用来定义元素的最小高度,就是元素可以比指定值高,但不能比其矮。当元素内容过多时最小高度装不下后,元素的高度将随内容增加而增加。该属性不允许指定负值,设置的最小高度不包括填充,边框,或页边距。

min-height属性是用来实现:元素必须有一定的高度,但又不想固定,当元素内容小于元素的最小高度时,元素保持最小高度不变,当元素内容大于元素的最小高度时,元素的高度会随元素内容增加而增加。

min-height属性相似属性

min-height属性语法格式

  1. css语法:min-height:length/%/inherit;
  2. JavaScript 语法: object.style.minHeight="10px";

属性值说明

  • length:定义元素的最小高度,默认值是 0;
  • %:定义基于包含它的块级对象的百分比最小高度;
  • inherit:从父元素继承min-height属性的值;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css min-height属性设置元素最小高度</title>
<style type="text/css">
.div{min-height:20px;width:300px;background:aliceblue;border:1px solid red;}
</style>
</head>
<body>
<div class="div"></div>
<div class="div">这里的内容很少</div>
<div class="div">这里的内容很多,这里的内容很多,这里的内容很多,
这里的内容很多,这里的内容很多,这里的内容很多,这里的内容很多</div>
</body>
</html>

运行结果:

css min-height属性设置元素最小高度

 

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-min-height.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情