DIV高度自适应及应该注意的问题.docxVIP

DIV高度自适应及应该注意的问题(1)DIV高度自适应及注意问题积累了一些经验，总结出一些关于div高度自适应的技巧，希望有助于大家，转载请标明出处，谢谢。一、DIV高度自适应（父div高度随子div的高度改变而改变）1、如果父div不定义height、子div均为标准流的时候，父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。代码：?styletypestyletype=text/css?#aa{border:#000000solid5px} ?#bb{border:#00ffffsolid5px;} ?#cc{border:#0033CCsolid5px} ?/ spanstyle?dividdivid=aa父div ?dividdivid=bb子div/ spandiv?dividdivid=cc子div/ spandiv?/ spandiv?效果：IE、FF下一致2、如果父div定义height,子div均为标准流的时候，在IE下父div的height随内容变化而变化，ff中则固定大小，如父div设置height:50px代码：?styletypestyletype=text/css?#aa{border:#000000solid5px;height:50px} ?#bb{border:#00ffffsolid5px;} ?#cc{border:#0033CCsolid5px} ?/ spanstyle?dividdivid=aa父div ?dividdivid=bb子div/ spandiv?dividdivid=cc子div/ spandiv?/ spandiv?IE效果FF下效果3、如果子div使用了float属性，此时已经脱离标准流，父div不会随内容的高度变化而变化，解决的办法是在浮动的div下面，加一个空div，设置clear属性both未加空div代码：?styletypestyletype=text/css?#aa{border:#000000solid5px;} ?#bb{border:#00ffffsolid5px;float:left} ?#cc{border:#0033CCsolid5px;float:left} ?/ spanstyle?dividdivid=aa父div ?dividdivid=bb子div/ spandiv?dividdivid=cc子div/ spandiv?/ spandiv?IE效果：FF效果：修改后代码：?styletypestyletype=text/css?#aa{border:#000000solid5px;} ?#bb{border:#00ffffsolid5px;float:left} ?#cc{border:#0033CCsolid5px;float:left} ?/ spanstyle?dividdivid=aa父div ?dividdivid=bb子div/ spandiv?dividdivid=cc子div/ spandiv?divstyledivstyle=clear:both/ spandiv?/ spandiv?修改后效果：IEFF一致4.另类的DIV高度自适应原理:padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。此方法必须加文档信息才能正常显示代码：??/TR/xhtml1/DTD/xhtml1-transitional.dtd?htmlxmlnshtmlxmlns=/1999/xhtml?styletypestyletype=text/css?#aa{border:#000000solid5px;overflow:hidden;} ?#bb{border:#00ffffsolid5px;float:left; ?padding-bottom:100000px;margin-bottom:-100000px;} ?#cc{border:#0033CCsolid5px;float:left; ?padding-bottom:100000px;margin-bottom:-100000px;} ?#dd{float:left} ?/ spanstyle?dividdivid=aa?dividdivid=bb子div/ spandiv?dividdivid=cc子div/ spandiv?dividdivid=dd子divbr/br/br/br/br// spandiv?/ spandiv??效果：二、DIV高度自适应（子div高度随父亲div高度改变而改变）在有边框的情况下，你会发现同一个div,在IE下的高度和在FF下的高度是