鲨鱼网
DIV高度自适应方法汇总
创始人
2024-07-11 17:40:10
0次

你对DIV高度自适应的方法是否了解，这里和大家分享一下，网站制站中，我们经常要把两个并排显示的div实现一样高的效果，即每列高度相同，有以下几种方法。

DIV高度自适应方法汇总

网站优化（seo）中，提到过网站样式的优化，即在网站的布局设计中，采用DIV+CSS来布局。网站制站中，我们经常要把两个并排显示的div实现一样高的效果，即每列高度（事先并不能确定哪列的高度）的相同，有以下几种方法解决DIV高度自适应问题：

1、JS实现（判断2个div高）；

2、纯CSS方法；

3、加背景图片实现。

◆DIV+CSS基本布局：

  1.  
 
    •  
  •  

    1、js实现div高度自适应

    代码如下：

    1.  
    2.  
    3.  
    4.  

     （注：网上公布了不少方法，但代码或多或少有错；上面的是无错代码；上面的代码在IE6.0/IE7.0下通过，并没有在opera和firefoxs下测试。）

    2、纯CSS方法实现DIV高度自适应

    CSS里代码（IE下测试通过，但不会显示div下边框，即border-bottom）：

    1. /*左右自适应相同高度start*/  
    2. #m1,#m2  
    3. {  
    4. padding-bottom:32767px!important;  
    5. margin-bottom:-32767px!important;  
    6. }  
    7. @mediaalland(min-width:0px){  
    8. #m1,#m2  
    9. {  
    10. padding-bottom:0!important;  
    11. margin-bottom:0!important;  
    12. }  
    13. #m1:before,#m2:before  
    14. {  
    15. content:'[DONOTLEAVEITISNOTREAL]';  
    16. display:block;  
    17. background:inherit;  
    18. padding-top:32767px!important;  
    19. margin-bottom:-32767px!important;  
    20. height:0;  
    21. }  
    22. }  
    23. /*左右自适应相同高度end*/  
    24.  

     3、加背景图片实现DIV高度自适应

    这个方法，很多大网站在使用，如163，sina等。

    XHTML代码：

    1.  
    2. 这是第一列
     
  • 这是第二列
    •  
    •  
  •  
  •  

    •  CSS代码:

    1. #wrap{width:776px;background:url(bg.gif)repeat-y300px;}  
    2. #column1{float:left;width:300px;}  
    3. #column2{float:right;width:476px;}  
    4. .clear{clear:both;}  
    5.  

    还有其他的一些方法，但主流就是这几种了。如果你还有关于多个div自适应高度的好的代码，请给我们留言，欢迎与我们讨论。
     

    【编辑推荐】

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

     

     


     

    上一篇：私有云建设：为崎岖的道路做好准备

    下一篇：防止入侵从Web应用安全漏洞做起

    相关内容

    热门资讯

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