在ie,firefox下,要想实现div高度自适应,必须考虑浏览器兼容问题。因为在firefox中有min-height这个属性来设置div容器的最小高度,当实际高度超过min-height时,firefox会自动适应,但是遗憾的是ie不支持这个属性。
另一方面,ie的height其实就等同与firefox的min-height属性,而且如果不去设置ie的height,它也会很好的自适应高度,而firefox就没有这个特点。
总结一下各种解决方案:
方法1,利用!important
代码:
min-height:100px;
height:auto !important;
height:100px;
overflow:visible;
这是兼容ie6,ie7,firefox的方法,不仅解决了高度自适应,还可以设置最小高度。
方法2,ie的height有自动适应高度的能力,而firefox在设置height后没有自适应能力,但是经过测试,如果firefox既不设置height,也不设置min-height,竟然也能够自适应。例外的情况是div内部元素有浮动,就不会自适应了。
方法3:为解决方法2中浮动的问题,有3种方法:
1,在div内部所有元素之后加一个clear:both;的元素,可以是div,也可以使ul。
2,给div加上overflow:auto;样式。
3,javascript:document.getElementByIdx_x("wai-div").style.height=document.getElementByIdx_x("nei-div").scrollHeight+20+"px" 。这个办法的局限性是,当内部元素多的时候,就变得麻烦了。
不管你用什么方法,能解决页面兼容性的问题就是好方法,在网站建设中,不断积累细微的经验,才能不断进步。