div css min-height小实例

简单css 最小高度 min-height实例，目标让各人认识min-height效果。这里对一个盒子配置一个最小高度，在模式少与模式多两种情况下高度变化环境。

扶直：为了观测到功效，我们对对象设置装备摆设css宽度和css边框。

1、模式少时完整min-height实例代码（HTML+CSS）

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>min-height css实例</title> 
<style> 
.exp{min-height:100px; width:100px; border:1px solid #F00} 
</style> 
</head> 
<body> 
<div class="exp">Thinkcss模式少时</div> 
</body> 
</html>

配置min-height最小高度为100px

2、内容少时最小高度成效截图

min-height实践实例效果截图
min-height实践实例成效截图

从上图或者看出模式少时，此div盒子高度恰恰是最小高度设置值。

3、形式多时完整最小高度实例代码

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>min-height css实例</title> 
<style> 
.exp{min-height:100px; width:100px; border:1px solid #F00} 
</style> 
</head> 
<body> 
<div class="exp">Thinkcss内容多，测试形式， 
接待到CSS5领略进修CSS、用意CSS标题问题。迎接退出DIV CSS出产HTML队伍</div> 
</body> 
</html>

4、形式适量时最小高度实例成绩截图

css div最小高度实例效果与说明分析图
css div最小高度实例成效与注明解析图

从以上实例看出同样CSS 最小高度，当形式少时，对象DIV高度展现设置100%，形式多时，div高度随内容添加而变高。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c53076.shtml