（转）Div左右两侧等高

一. 利用背景图，做出左右等高的模拟效果  

这种方法不是真正的左右等高，而是在外框元素中添加一张背景图片，当内容增多时，背景会纵向重复，就会形成左右等高的效果。

这种方法不是真正的div自动等高，而是在左右两个div的外面添加一个外框元素，给这个外框元素添加一个背景，当内容增多时，背景就会向下纵向重复，看起来就向左右两个div都自动向下延伸了一样。下面写一下详细代码。

Html代码：

<div id="wrap">

<div id="left_a">

<p>http://Dreamweaver.abang.com</p><p>http://Dreamweaver.abang.com</p>

<p>http://Dreamweaver.abang.com</p><p>http://Dreamweaver.abang.com</p>

<p>http://Dreamweaver.abang.com</p><p>http://Dreamweaver.abang.com</p>

<p>http://Dreamweaver.abang.com</p><p>http://Dreamweaver.abang.com</p>

<p>http://Dreamweaver.abang.com</p>

</div>

<div id="right_a">

<br /> <br />

<br /> <br />

<br /> <br />

</div>

<div class="clear"></div>

</div>

CSS代码：

*{margin:0;     padding:0;}

#wrap{

width:950px;

height:100%;

clear:both;

margin:0 auto;

background:#FFF url(background.gif) repeat;

}

#left_a { float:left; width:190px; }

#right_a { float:right;    width:750px; }

.clear { clear:both; }

对以上代码的解释：

1、在Html代码中，<div id="wrap">这行是外面容器的开始，在CSS中用background给它定义一个背景；

2、给wrap定义背景的时候要注意，这里定义的总宽度是950像素，左侧边栏是190像素，右侧是750像素，两者中间有10像素的空白，制作背景图时应按照此尺寸制作，左侧190像素是一个颜色，右侧750像素是一个颜色，中间10像素白色。

3、由于这个布局采用的是float浮动布局的方式，两个div分别向左向右分布，很容易让浏览器解析时出现问题而检测不到高度，所以在CSS代码中，wrap的高度应定义为100%，并且使用clear方法清除浮动，让其在Firefox中也正常显示。

二. 利用表格嵌套 

这种方法就是在div中嵌套一个表格，因为表格是可以左右自动等高的，所以当一侧的内容增多时，两侧都会自动等高。

其实只要用表格布局做过页面，这个方法基本上大家都会，就是在div中嵌套表格。

原则上，使用div布局应尽量减少表格出现，但为了达到某些效果，稍稍的使用一些也是可以的，况且国外有些较有名的网站也使用了这种方法。下面讲解具体方法。

Html代码：

<div id="wrap">

<table border="0" cellpadding="0" cellspacing="0" id="table_layout">

<tr>

<td id="left_b">

<div class="box">

<p>http://Dreamweaver.abang.com</p><p>&nbsp;</p>

<p>http://Dreamweaver.abang.com</p><p>&nbsp;</p>

</div>

<div class="box">

<p>http://Dreamweaver.abang.com</p><p>&nbsp;</p>

<p>http://Dreamweaver.abang.com</p>

</div>

</td>

<td id="mid_b">&nbsp;</td>

<td id="right_b">

<div class="box">阿邦Dreamweaver专栏</div>

</td>

</tr>

</table>

</div>

CSS代码：

* { margin:0; padding:0; }

#wrap { width:950px; height:100%; clear:both; margin:0 auto; background:#FFF; color:#FFF; }

#table_layout { width:950px; }

#left_b { width:190px; background:#09C; }

#right_b { width:750px; background:#09C; }

#mid_b { width:10px; }

.box { clear:both; height:100%; }

上面的代码是将表格嵌套在wrap这个div中，在这个table中又插入其它div，这样就可以让左右两列达到自动等高的效果。上面的代码大家应该都能看懂，如果有问题可以向我提问。

三. 利用内、外补丁padding和margin自动等高 

这种方法是利用正内补丁和负外补丁相结合，再隐藏掉溢出的内容，最终达到左右等高的效果。

具体理论不再多说了，只要把代码给大家列出来就能一目了然了。

Html代码：

<div id="wrap">

<div id="left">

<br /><br />

</div>

<div id="right">

http://Dreamweaver.abang.com <br />

<br /> <br /> <br />

阿邦Dreamweaver专栏 <br /> <br />

<br /> <br />

</div>

</div>

CSS代码：

* { margin:0; padding:0; }

#wrap{ overflow:hidden; padding:0; padding-left:180px; }

#left,#right{ height:auto; margin-bottom:-10000px; padding-bottom:10000px; }

#left{ display:inline; float:left; width:180px; margin-left:-180px; background: #0CF; }

#right{ float:right; width:100%; background: #FC6; }

个人优化，div自适应宽度css代码：

* { margin:0; padding:0; }

#wrap{ overflow:hidden; padding:0; }

#left,#right{ height:auto; margin-bottom:-10000px; padding-bottom:10000px; }

#left{ display:inline; float:left; width:180px; background: #0CF; }

#right{ background: #FC6; overflow: hidden; }

对以上代码的部分解释：

1、最外面的wrap必须使用overflow:hidden来隐藏溢出的内容。

2、wrap的左内补丁设置为180像素是为了让left这个div有空间显示。

3、left和right两个div底部外补丁为-10000px，底部内补丁为10000px，这是必须设置的，如果内容可能会较多，可以将数值再增大。

4、left这个div居左，right居右，display:inline属性是为了修正left在IE6中会跑出外框的bug。

四. 利用Javascript脚本 

Javascript是最好的Html辅助程序，尤其是前端界面的开发，在自动等高方面，也有专业的脚本。

网上使div等高的Javascript脚本很多，但有些仅仅针对IE浏览器可用，对Firefox、Opera等浏览器无效，所以在选择脚本的时候应该特别注意脚本的跨浏览器兼容性。

下面给大家介绍一个从网上找来的Javascript脚本，并列出使用方法。

Html代码：

<div class="div_top">

这是顶部的div

</div>

<div id="Div1" class="div_left">

左部div <br />

http://Dreamweaver.abang.com <br /><br />

<br /><br />

<br /><br />

</div>

<div id="Div2" class="div_right">

右部div <br/> http://Dreamweaver.abang.com <br/>

</div>

<div class="div_bottom">

这是底部的DIV

</div>

CSS代码：

* { margin:0px; padding:0px; }

.div_top{ width:100%; background:#FCC; }

.div_bottom{ width:100%; background:#FFC; }

.div_left{ position:absolute; width:200px; background:#FE2; }

.div_right{ margin-left:200px; background:#0CF; }

Javascript代码：

<script>

function P7_colH(){

var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa;

if(dA&&dA.length){

for(i=0;i<dA.length;i++){

dA[i].style.height='auto';

}

for(i=0;i<dA.length;i++){

oh=dA[i].offsetHeight;h=(oh>h)?oh:h;

}

for(i=0;i<dA.length;i++){

if(an){

dA[i].style.height=h+'px';

}

else{

P7_eqA(dA[i].id,dA[i].offsetHeight,h);

}

}

if(an){

for(i=0;i<dA.length;i++){

hh=dA[i].offsetHeight;

if(hh>h){

dA[i].style.height=(h-(hh-h))+'px';

}

}

}else{

document.p7eqa=1;

}

document.p7eqth=document.body.offsetHeight;

document.p7eqtw=document.body.offsetWidth;

}

}

function P7_eqT(){

if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){

P7_colH();

}

}

function P7_equalCols(){

if(document.getElementById){

document.p7eqc=new Array;

for(i=0;i<arguments.length;i++){

document.p7eqc[i]=document.getElementById(arguments[i]);

}

setInterval("P7_eqT()",10);

}

}

function P7_eqA(el,h,ht){

var sp=10,inc=10,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height);

ch=(ch)?ch:h;

var ad=oh-ch,adT=ht-ad;

nh+=inc;

nh=(nh>adT)?adT:nh;

g.style.height=nh+'px';

oh=g.offsetHeight;

if(oh>ht){

nh=(ht-(oh-ht));g.style.height=nh+'px';

}

if(nh<adT){

setTimeout("P7_eqA('"+el+"',"+nh+","+ht+")",sp);

}

}

</script>

以上Html、CSS、Javascript三部分代码齐备后，还需要在网页的body标签处加入一行代码onload="P7_equalCols('Div1','Div2')"，

变成<body onload="P7_equalCols('Div1','Div2')">, 其中Div1对应的是左侧div的id，Div2对应的是右侧的id

如果是三列布局，可以再自己增加内容，变成 <body onload="P7_equalCols('Div1','Div2','Div3')">

将以上代码复制到网页文件中，即可实现div自动等高的效果了。

阿邦Dreamweaver专栏