首页 > 代码库 > （转）Div左右两侧等高
（转）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> </p>
<p>http://Dreamweaver.abang.com</p><p> </p>
</div>
<div class="box">
<p>http://Dreamweaver.abang.com</p><p> </p>
<p>http://Dreamweaver.abang.com</p>
</div>
</td>
<td id="mid_b"> </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 onl oad="P7_equalCols(‘Div1‘,‘Div2‘)">, 其中Div1对应的是左侧div的id，Div2对应的是右侧的id
如果是三列布局，可以再自己增加内容，变成 <body onl oad="P7_equalCols(‘Div1‘,‘Div2‘,‘Div3‘)">
将以上代码复制到网页文件中，即可实现div自动等高的效果了。
阿邦Dreamweaver专栏