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

伊诺008 2010-09-14

展开全文

一、DIV高度自适应（父div高度随子div的高度改变而改变）

1、如果父div不定义height、子div均为标准流的时候，父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。

代码：


    <styletypestyletype="text/css"> 
    #aa{border:#000000solid5px}  
    #bb{border:#00ffffsolid5px;}  
    #cc{border:#0033CCsolid5px}  
    style> 
    <dividdivid="aa">父div  
    <dividdivid="bb">子divdiv> 
    <dividdivid="cc">子divdiv> 
    div>

效果：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}  
    style> 
    <dividdivid="aa">父div  
    <dividdivid="bb">子divdiv> 
    <dividdivid="cc">子divdiv> 
    div>

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}  
    style> 
    <dividdivid="aa">父div  
    <dividdivid="bb">子divdiv> 
    <dividdivid="cc">子divdiv> 
    div>

IE效果：

FF效果：

修改后代码：


    <styletypestyletype="text/css"> 
    #aa{border:#000000solid5px;}  
    #bb{border:#00ffffsolid5px;float:left}  
    #cc{border:#0033CCsolid5px;float:left}  
    style> 
    <dividdivid="aa">父div  
    <dividdivid="bb">子divdiv> 
    <dividdivid="cc">子divdiv> 
    <divstyledivstyle="clear:both">div> 
    div>

修改后效果：IEFF一致

4.另类的DIV高度自适应
原理:
padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。此方法必须加文档信息才能正常显示
代码：


    

     
    "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <htmlxmlnshtmlxmlns="http://www./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}  
    style> 
    <dividdivid="aa"> 
    <dividdivid="bb">子divdiv> 
    <dividdivid="cc">子divdiv> 
    <dividdivid="dd">子div<br/><br/><br/><br/><br/>div> 
    div>