div高度自适应及应该注意的问题

《div高度自适应及应该注意的问题》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、·DIV高度自适应及应该注意的问题(1)DIV高度自适应及注意问题积累了一些经验，总结出一些关于div高度自适应的技巧，希望有助于大家，转载请标明出处，谢谢。一、DIV高度自适应（父div高度随子div的高度改变而改变）1、如果父div不定义height、子div均为标准流的时候，父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。代码： 1. 2.#aa{border:#000000solid5px} 3.#bb{border:#00ffffsolid5px;} 4.#c

2、c{border:#0033CCsolid5px} 5.style> 6.父div 7.子divdiv> 8.子divdiv> 9.div> 效果：IE、FF下一致2、如果父div定义height,子div均为标准流的时候，在IE下父div的height随内容变化而变化，ff中则固定大小，如父div设置height:50px代码： 10. 11

3、.#aa{border:#000000solid5px;height:50px} 12.#bb{border:#00ffffsolid5px;} 13.#cc{border:#0033CCsolid5px} 14.style> 15.父div 1.子divdiv> 2.子divdiv> 3.div> IE效果FF下效果3、如果子div使用了float属性，此时已经脱离标准流，父div不会随内容的高度变化而

4、变化，解决的办法是在浮动的div下面，加一个空div，设置clear属性both未加空div代码： 4. 5.#aa{border:#000000solid5px;} 6.#bb{border:#00ffffsolid5px;float:left} 7.#cc{border:#0033CCsolid5px;float:left} 8.style> 9.父div 10.子divdiv> 11.

5、id="cc">子divdiv> 12.div> IE效果：FF效果：修改后代码： 1. 2.#aa{border:#000000solid5px;} 3.#bb{border:#00ffffsolid5px;float:left} 4.#cc{border:#0033CCsolid5px;float:left} 5.style> 6.父div 7.子divdiv> 8.

6、viddivid="cc">子divdiv> 9.div> 10.div> 修改后效果：IEFF一致4.另类的DIV高度自适应原理:padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。此方法必须加文档信息才能正常显示代码： 11.12. 13."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 14.

7、shtmlxmlns="http://www.w3.org/1999/xhtml"> 15. 16.#aa{border:#000000solid5px;overflow:hidden;} 17.#bb{border:#00ffffsolid5px;float:left; 18.padding-bottom:100000px;margin-bottom:-100000px;} 19.#cc{border:#0033CCsolid5px;float:left; 20.padding-bott