解决DIV列高度自适方法及优缺点

开发 前端
解决DIV列高度自适的方法有很多种,这里介绍三种最常用的方法以及优缺点给大家,相信本文介绍一定会让你有所收获。

你对解决DIV列高度自适方法是否熟悉,这里和大家分享一下,主要从三个方面向大家介绍,希望你能够掌握。

解决DIV列高度自适方法及优缺点

解决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)#FFFFFFrepeat-yleft;  
  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:1pxsolidtransparent!important;  
  20. margin-top:-1px!important;  
  21. border-top:0;  
  22. margin-top:0;  
  23. clear:both;  
  24. visibility:hidden;  
  25. }  
  26. html代码:<DIVidDIVid="main"> 
  27. <DIVidDIVid="DIVleft">DIV> 
  28. <DIVidDIVid="DIVright">DIV> 
  29. <DIVclassDIVclass="clear">DIV> 
  30. DIV> 
  31.  

优点:无hacks,完全的自适应高度。

2、脚本控制高度

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

  1. <scriptlanguagescriptlanguage="javascript"> 
  2. document.getElementById"DIVleft").style.height 
  3. =document.getElementById"DIVright").scrollHeight"px"  
  4. script> 

优点:代码超级简单

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

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-240px00;  
  20.   background:#F0F0F0;  
  21. }  
  22.  

 html代码:

  1. <DIVidDIVid="main"> 
  2.   <DIVidDIVid="DIVleft"> 
  3.     <DIVidDIVid="DIVright">DIV> 
  4.   DIV>!  
  5. DIV> 
  6.  

或许刚接触的WebStandards的朋友对这种方法不怎么理解,现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高度自适应问题
  2. IE6.0对padding的解读分析
  3. CSS样式表高效使用八大秘诀
  4. CSS textarea高度自适应问题解决方案
  5. IE6中常见CSS兼容性解决十大技巧
责任编辑:佚名 来源: svn8.com
相关推荐

2010-09-15 13:14:04

DIV控制

2010-09-13 09:28:30

DIV自适应高度DIV最小高度

2010-09-09 10:37:39

CSSdiv列高度

2012-05-03 09:58:19

VLANVLAN划分

2010-08-25 13:10:43

div高度CSS

2009-11-05 14:13:33

WCF自承载

2010-08-24 09:05:20

CSS+DIV

2010-08-23 10:50:39

DIV+CSS

2010-08-31 14:49:57

CSS居中

2010-08-27 13:58:06

DIV+CSS

2010-08-30 09:52:03

DIV高度自适应

2010-08-27 09:45:49

CSS Sprites

2014-05-12 09:26:08

2010-08-30 09:15:15

DIV高度自适应

2010-08-26 14:18:25

DIV高度

2013-11-13 14:11:43

2017-10-23 13:20:37

2010-08-26 11:27:35

CSS居中

2020-02-18 10:16:42

React数据代码

2010-09-13 17:43:59

CSS单行内容居中
点赞
收藏

51CTO技术栈公众号