鲨鱼网
DIV高度自适应及应该注意的问题
创始人
2024-07-11 17:21:18
0次

本文和大家重点讨论一下DIV高度自适应及注意问题，主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两种情况。

DIV高度自适应及注意问题

积累了一些经验，总结出一些关于div高度自适应的技巧，希望有助于大家，转载请标明出处，谢谢。

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

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

代码： 

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

     效果：IE、FF下一致

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

    代码： 

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

     IE效果

    FF下效果

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

    未加空div代码： 

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

     IE效果：

    FF效果：

    修改后代码： 

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

    •  修改后效果：IEFF一致

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

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




       
    17.  
    18.  

    效果：

    #p#

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

    在有边框的情况下，你会发现同一个div,在IE下的高度和在FF下的高度是不一样的，比如你设置了高度为100px的div，边框是border:5px;IE的高度是5+5+空白区域=100px，而FF下高度是100px的div是不包括高度的，只是空白区域的高度，如下图黑框的部分:


    黑框的上方是对齐的，但是设置了同样的高度，效果却不一样，代码如下：

    1.  
    2.  
    3. #aa{border:#000000solid5px;height:100px;}  
    4.  
    5. #bb{border:#00ffffsolid5px;float:left;height:100%}  
    6.  
    7. #cc{border:#0033CCsolid5px;float:left}  
    8.  
    9.  
    10.  
    11.  
    12.  
    13. 子div 
    14.  
    15. 子div 
    16.  
    17.  

    如果没有设置边框，完全没有高度不一致的情况，子div适应父div很简单，如上面代码，只是在子div加了height:100%属性即可。如果设置了边框，可以把子div的高度设置为比父div小上下边框高度的值，比如在此例中，可把#bb中height改为100-5-5＝90px，结果在IE和Mozilla中显示一致。

    有一点要注意，如果父div是body的话，也就是说一个body套了一个div，让div适合body的大小的，必须设置body的高度才能实现子div随body改变而改变，body{height:100%}

    【编辑推荐】

    1. 三种有效解决DIV高度自适应的方法
    2. IE6、IE7、Firefox中margin问题解决办法
    3. DIV布局规范中CSS类及id命名方式
    4. CSS兼容：解决IE6、IE7和IE8的兼容问题妙招
    5. 将XHTML+CSS页面转换为打印机页面技巧

    上一篇：教你轻轻松松搞定无线网络配置

    下一篇：详解DHCP Snooping的使用

    相关内容

    热门资讯

    PHP新手之PHP入门 PHP是一种易于学习和使用的服务器端脚本语言。只需要很少的编程知识你就能使用PHP建立一个真正交互的...
    网络中立的未来 网络中立性是什... 《牛津词典》中对“网络中立”的解释是“电信运营商应秉持的一种原则，即不考虑来源地提供所有内容和应用的...
    各种千兆交换机的数据接口类型详... 千兆交换机有很多值得学习的地方，这里我们主要介绍各种千兆交换机的数据接口类型，作为局域网的主要连接设...
    粉嫩如何诠释霸道 东芝M805... “霸道粉”是个什么玩意东芝M805拿过来的时候，笔者扑哧笑了，不是笑这款笔记本，而是笑这款产品的颜色...
    什么是大数据安全 什么是大数据... 在《为什么需要大数据安全分析》一文中，我们已经阐述了一个重要观点，即：安全要素信息呈现出大数据的特征...
    如何利用交换机和端口设置来管理... 在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    全面诠释网络负载均衡 负载均衡的出现大大缓解了服务器的压力，更是有效的利用了资源，提高了效率。那么我们现在来说一下网络负载...
    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...
    30分钟搞定iOS自定义相机 最近公司的项目中用到了相机，由于不用系统的相机，UI给的相机切图，必须自定义才可以。就花时间简单研究...
    Intel将Moblin社区控... 本周二，非营利机构Linux基金会宣布，他们将担负起Moblin社区的管理工作，而这之前，Mobli...