表默认有一个高度,当超出高度时就出现滚动条.这很简单只需要:给容器的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> </p>
<div class="h">
<p>这个是内容高度高于60像素效果，右侧出现滚动条 </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</body>
</html>
最新文章
热门文章
猜你喜欢
