CSS 基础例子最小高度和最大高度设置

最新推荐文章于 2023-12-05 15:38:44 发布

weixin_30338743

最新推荐文章于 2023-12-05 15:38:44 发布

阅读量404

点赞数

原文链接：http://www.cnblogs.com/shawnhu/p/8137163.html

版权

　　最小高度，无论什么时候，高度不会小于该值，即使内容很少，不限制高度最大值，超出时候，按照实际内容来决定高度

　　最大高度，无论什么时候，高度不会大于该值，即使内容很多，不限制最小高度，超出时候，多出部分会撑出元素外边

　　例子1，内容很少，　min-height:60px max-height:60px

　　html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.divcss5-min,.divcss5-max{ width:300px; border:1px solid #F00} 
.divcss5-min{ min-height:60px} 
.divcss5-max{ max-height:60px; margin-top:10px} 
</style>
</head>

<body>
<div class="divcss5-min"> 
    最小高度为60px 
</div> 
<div class="divcss5-max"> 
    最大高度为60px 
</div> 
</body>
</html>

运行结果：

　　例子2，内容很多时候

　　html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.divcss5-min,.divcss5-max{ width:300px; border:1px solid #F00} 
.divcss5-min{ min-height:60px} 
.divcss5-max{ max-height:60px; margin-top:10px} 
</style>
</head>

<body>
<div class="divcss5-min"> 
    最小高度为60px<br /> 
    DIVCSS5增加内容<br /> 
    增加内容<br /> 
    divcss5增加内容 
</div> 
<div class="divcss5-max"> 
    最大高度为60px<br /> 
    www.divcss5.com<br /> 
    增加内容<br /> 
    divcss5增加内容<br /> 
    增加内容 
</div>
</body>
</html>

转载于:https://www.cnblogs.com/shawnhu/p/8137163.html

weixin_30338743

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 基础例子最小高度和最大高度设置

　　最小高度，无论什么时候，高度不会小于该值，即使内容很少，不限制高度最大值，超出时候，按照实际内容来决定高度　　最大高度，无论什么时候，高度不会大于该值，即使内容很多，不限制最小高度，超出时候，多出部分会撑出元素外边　　例子1，内容很少，　min-height:60px max-height:60px　　html代码<!DOCTYPE html>&l...
复制链接

扫一扫