CSS技巧:3种常用方法解决div列高度自适应
创始人
2024-07-11 06:40:50
0

本文向大家介绍一下解决div列高度自适的3种常用方法,分别是利用“clear:both”背景填充,使用脚本控制高度和margin负值父子容器高度继承三种。

CSS技巧:解决div列高度自适的3种常用方法

解决div列高度自适的方法有很多种,这里介绍三种最常用的方法给大家(下面所有例子以父main,子divleft、divright为例)。

1、利用“clear:both”背景填充(推荐!!!)

这是使用最广泛的一种做法,我一直都用此方法解决div列高度自适问题。三行二列布局,主要内容在右边,网页宽度780px,左列240px,右列540px。

CSS代码: 

  1. #main{  
  2. width: 780px;  
  3. margin: 0;  
  4. background: url(bg.gif) #FFFFFF repeat-y left;  
  5. text-align: left;  
  6. }   
  7.  
  8. #divleft{  
  9. float: left;  
  10. width: 240px;  
  11. }   
  12.  
  13. #divright{  
  14. float: right;  
  15. width: 540px;  
  16. }   
  17.  
  18. .clear{  
  19. border-top:1px solid transparent !important;  
  20. margin-top:-1px !important;  
  21. border-top:0;  
  22. margin-top:0;  
  23. clear:both;  
  24. visibility:hidden;  
  25. }  
  26.  

html代码:

  1.  
 
  •  
  •  
  •  
  •  
  • 优点:无hacks,完全的自适应高度。#p#

    2、脚本控制高度 ..

    在中加入如下代码(假设divright的高度相对***):
     

    1.  

     优点:代码超级简单

    缺点:要确定有某一列的高度始终是相对***的,此方法比较被动。

    3、margin负值父子容器高度继承

    这个方法能较好地解决列高度相同的问题。三行二列布局,主要内容在左边,网页宽度780px,左列540px,右列240px。

    CSS代码:

    1. #main{  
    2.   width: 540px;  
    3.   float:left;  
    4.   background:#FFFFFF;  
    5.   text-align:left;  
    6. }  
    7.  
    8. #divleft{  
    9.   width: 540px;  
    10.   float: left;  
    11.   position:relative;  
    12.   margin-left:-540px;  
    13. }  
    14.  
    15. #divright{  
    16.   width: 240px;  
    17.   float: right;  
    18.   position:relative;  
    19.   margin: 0 -240px 0 0;  
    20.   background: #F0F0F0;  
    21. }  
    22.  

     html代码:

    1.  
    2.    
    3.     
     
  •   
  •  !   
  •  
  •  
  • 或许刚接触的Web Standards的朋友对这种方法不怎么理解,现Blank分析一下:

    [A]
    [B][C]

    上结构中a包含c,c包含b。当b的高度为***时,那么a和c将继承b的高度,如果a和b位置重合,将显示b的背景;而当c的高度***时,那么a继承将继承c的高度,如果a和b位置重合,将显示a的背景。这样无论b***或者c***都将显示div列高度相同。

    优点:兼有***种方法的优点,并且比***种方法的代码稍微简洁。

    缺点:整体结构只能左对齐。

    【编辑推荐】

    1. DIV+CSS布局注意要点
    2. IE6.0对padding的解读分析
    3. DIV+CSS网页错位诊断和解决方法
    4. Float构建三栏DIV CSS网页布局
    5. 技术分享 如何使用CSS控制超链接文字样式

     

    相关内容

    热门资讯

    PHP新手之PHP入门 PHP是一种易于学习和使用的服务器端脚本语言。只需要很少的编程知识你就能使用PHP建立一个真正交互的...
    网络中立的未来 网络中立性是什... 《牛津词典》中对“网络中立”的解释是“电信运营商应秉持的一种原则,即不考虑来源地提供所有内容和应用的...
    各种千兆交换机的数据接口类型详... 千兆交换机有很多值得学习的地方,这里我们主要介绍各种千兆交换机的数据接口类型,作为局域网的主要连接设...
    什么是大数据安全 什么是大数据... 在《为什么需要大数据安全分析》一文中,我们已经阐述了一个重要观点,即:安全要素信息呈现出大数据的特征...
    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
    Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
    范例解读VB.NET获取环境变... VB.NET编程语言的使用范围非常广泛,可以帮助开发人员处理各种程序中的需求,而且还能对移动设备进行...
    规避非法攻击 用好路由器远程管... 单位在市区不同位置设立了科技服务点,每一个服务点的员工都通过宽带路由器进行共享上网,和单位网络保持联...