最大高度max-height最小高度min-height各浏览器兼容写法（兼容IE6/7/8 /FF

时间：2021-04-16

　　表默认有一个高度,当超出高度时就出现滚动条.这很简单只需要:给容器的div定义一个高度,然后overflow: auto;

　　但是这并不是他想要的,还有另外的要求:当列表中的内容没有超出这个高度的时候,它只占有它自身的高度,举个例子:整个列表的最大高度是二行,当内容只有一行时它只显示一行的高度,二行的时候显示两行,当超过二行时就出现滚动条了.

　　ie7和ff默认是支持max-height,但是ie6、Chrome不支持该写法,如果让让max-height在ie6,Chrome都兼容呢,需要写上height: expression_r( this.scrollHeight > 60 ? “60px” : “auto” );-webkit-max-height: 60px;

　　min-height最小高度的实现（兼容IE.hack-max-height6、IE7、FF）

　　.hack-max-height{ height:auto!important; height:100px; min-height:100px;}注意书写的顺序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.h{max-height:60px; height: expression_r( this.scrollHeight > 60 ? "60px" : "auto" );-webkit-max-height: 60px; background-color:#CCC; overflow:auto;}
</style>
</head>

<body>
<div class="h">
这是内容高度小于60像素效果

</div>
<p>&nbsp;</p>
<div class="h">
<p>这个是内容高度高于60像素效果，右侧出现滚动条 </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</body>
</html>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章