自贡网站建设公司

实现CSS中div列高度自适的3种途径

这里向大家描述一下解决div列高度自适的3种常用方法，其中最常用大就是利用“clear:both”背景填充，三行二列布局，主要内容在右边，网页宽度780px,左列240px,右列540px，相信本文介绍一定会让你有所收获。

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

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

1、利用“clear:both”背景填充

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

CSS代码：

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

 html代码：

 
 
 
    
  
  
  
    2.

  • 优点：无hacks，完全的自适应高度。

    2、脚本控制DIV列高度

    在中加入如下代码（假设divright的高度相对***）：

     
 
 
      
  
  
  
      2. 
  
  
  
    2. document.getElementById"divleft") 
      3. 
  
  
  
    3. .style.height=document.getElementById"divright") 
      4. 
  
  
  
    4. .scrollHeight+"px" 
      5. 
  
  
  
    5. 
  
  
  
    6.

    优点：代码超级简单

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

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

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

    CSS代码：

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

     html代码：

     
 
 
      
  
  
  
      2. 
  
  
  
    2. 　　
      3. 
  
  
  
    3. 　　　　
      4. 
  
  
  
    4. 　　
      5. 
  
  
  
    5. 
  
  
  
    6.

    或许刚接触的WebStandards的朋友对这种方法不怎么理解，现Blank分析一下：

    ［Ａ］
    ［Ｂ］［Ｃ］

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

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

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


    网站题目：实现CSS中div列高度自适的3种途径
    链接地址：http://jxruijie.cn/article/dhggcoj.html

    其他资讯