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

来源：百度文库 编辑：神马文学网 时间：2024/04/25 17:49:38

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

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

代码： 

        
  1.  
    2.     
  2. #aa{border:#000000solid5px}  
    3.     
  3. #bb{border:#00ffffsolid5px;}  
    4.     
  4. #cc{border:#0033CCsolid5px}  
    5.     
  5. style> 
    6.     
  6. 父div  
    7.     
  7. 子divdiv> 
    8.     
  8. 子divdiv> 
    9.     
  9. div> 

效果：IE、FF下一致

2、如果父div定义height,子div均为标准流的时候，在IE下父div的height随内容变化而变化，ff中则固定大小，如父div设置height:50px

代码： 

        
  1.  
    2.     
  2. #aa{border:#000000solid5px;height:50px}  
    3.     
  3. #bb{border:#00ffffsolid5px;}  
    4.     
  4. #cc{border:#0033CCsolid5px}  
    5.     
  5. style> 
    6.     
  6. 父div  
    7.     
  7. 子divdiv> 
    8.     
  8. 子divdiv> 
    9.     
  9. div> 

IE效果

FF下效果

3、如果子div使用了float属性，此时已经脱离标准流，父div不会随内容的高度变化而变化，解决的办法是在浮动的div下面，加一个空div，设置clear属性both

未加空div代码： 

        
  1.  
    2.     
  2. #aa{border:#000000solid5px;}  
    3.     
  3. #bb{border:#00ffffsolid5px;float:left}  
    4.     
  4. #cc{border:#0033CCsolid5px;float:left}  
    5.     
  5. style> 
    6.     
  6. 父div  
    7.     
  7. 子divdiv> 
    8.     
  8. 子divdiv> 
    9.     
  9. div> 

IE效果：

FF效果：

修改后代码： 

        
  1.  
    2.     
  2. #aa{border:#000000solid5px;}  
    3.     
  3. #bb{border:#00ffffsolid5px;float:left}  
    4.     
  4. #cc{border:#0033CCsolid5px;float:left}  
    5.     
  5. style> 
    6.     
  6. 父div  
    7.     
  7. 子divdiv> 
    8.     
  8. 子divdiv> 
    9.     
  9. div> 
    10.     
  10. div> 

修改后效果：IEFF一致

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

        

    2.     
  2.  
    3.     
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    4.     
  4.  
    5.     
  5.  
    6.     
  6. #aa{border:#000000solid5px;overflow:hidden;}  
    7.     
  7. #bb{border:#00ffffsolid5px;float:left;  
    8.     
  8. padding-bottom:100000px;margin-bottom:-100000px;}  
    9.     
  9. #cc{border:#0033CCsolid5px;float:left;  
    10.     
  10. padding-bottom:100000px;margin-bottom:-100000px;}  
    11.     
  11. #dd{float:left}  
    12.     
  12. style> 
    13.     
  13.  
    14.     
  14. 子divdiv> 
    15.     
  15. 子divdiv> 
    16.     
  16. 子div




    div> 
    17.     
  17. div> 
    18.     
  18.  

效果：

DIV高度自适应及应该注意的问题 3G使用技巧及应该注意的问题 关于IFRAME 自适应高度的研究 关于IFRAME 自适应高度的研究 iframe自适应高度[转] 再谈iframe自适应高度 iframe高度自适应 典型的三行二列居中高度自适应布局 关于IFRAME 自适应高度的研究 - 编程岁月 典型的三行二列居中高度自适应布局 二手车买卖中应该注意的问题 购买笔记本应该注意的问题 微型讲座应该注意的问题 催眠中应该注意的问题 阅读上市公司年报应该注意的问题 微型讲座应该注意的问题 电脑维修应该注意的问题 选择风水师应该注意的问题 各时期女人应该注意的问题 购买台钻应该注意的问题 DIV+CSS的优点及用其优化网站时注意的几点误区 div根据内容自动调节高度的解决方法 高抛低吸的基本原则和应该注意的问题 孩子的初中阶段应该注意的问题