max-height和min-height

max-height 设置元素的最大高度。元素可以比指定值矮,但不能比其高。
min-height 设置元素的最小高度。元素可以比指定值高,但不能比其矮。
[不包括外边距、边框和内边距]

最大最小高度样式使用非常方便,满足固定高度弊端,但现在IE6却不支持,IE7及以上浏览器和其它浏览器均支持。

<!--最小高度限制的对象:内容少不够限制最小高度,显示限制最小高度-->
<div class="divcss-min"> 
    最小高度为60px 
</div> 
<!--最小高度限制的对象:内容超出限制最小高度,自动增高显示当前内容的高度-->
<div class="divcss-min"> 
    最小高度为60px<br /> 
    增加内容<br/> 
    增加内容<br/> 
    divcss5增加内容 
</div> 
<!--最大高度限制的对象:内容少不够限制最大高度,自动显示当前内容的高度-->
<div class="divcss-max"> 
    最大高度为60px 
</div> 
<!--最大高度限制的对象:内容多到最大高度限制也装不下,对象本身还是最大高度,出现内容溢出-->
<div class="divcss-max"> 
    最大高度为60px<br/> 
    www.baidu.com<br/> 
    增加内容<br /> 
    divcss5增加内容<br/> 
    增加内容 
</div>  

.divcss-min,.divcss-max{ width:300px; border:1px solid #F00} 
.divcss-min{ min-height:60px} 
.divcss-max{ max-height:60px; margin-top:10px;overflow:hidden} 
<!--加入overflow:hidden样式即可隐藏最大高度显示溢出内容-->

max-height和min-height

你可能感兴趣的:(height)