查看文章 |
有很多的时候,有这样一种情况：没有数据的是要求一个高度，有了数据之后，高度要随着内容增加。 今天把我对这个问题的解决方案写一下。 首先，我希望在没有数据的时候，此div的高度为200px，代码如下： [html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <body> [/html] 当文字行数增加，在IE和ff下的状态分别是 
除了IE6（IE7 8 FF Opare Safari Chrome）都是左侧的显示样式。 既然IE6本身已经可以 自动适应，那么就该对其他较为“不聪明”的浏览器进行不同的CSS策略。 引入两个属性 min-height和height:auto。 div{width:400px; height:200px; border:1px #333 solid; min-height:200px; height:auto } 测试后，各种浏览器显示的效果（文字行数已经超过200px）已经符合了我的要求，自动适应了。 这样，后面的height:auto覆盖了前面的height:200px; 众所周知，IE6是不支持min-height属性的，按照CSS的优先级原则，同一个rule里，相同的属性，最后出现的优先。 这样就产生了一个问题，假如没有数据，那么IE6又不清楚min-height是什么，那么height:auto对于IE6是什么？ 将内容删减至2行，测试，如图 
于是最终样式为： div{width:400px; border:1px #333 solid; height:auto !important; height:200px; min-height:200px; } 对于超过最小高度自适应还有另外一个方法。利用float。 |
