div垂直两列自适应相同高度的3种方法-IT技术精粹[JiShuBu.Com]-倾力打造一流IT技术平台！

div垂直两列自适应相同高度的3种方法

您现在正在浏览：首页 > CSS >

div垂直两列自适应相同高度的3种方法

作者：noname　发布时间：2008-04-29 11:27:30　来源：互联网

在table布局时代经常用的一种方法就是两列，然后一样的高度，不同的背景色区分不同的区域
预览下列代码：

程序代码

演示：http://www.d8in.com/blog/demo/div_vh/tableDemo.html

但是这样的布局到了div布局时代就变成了一个问题，因为在table里面

程序代码

每个td都属于tr里面的元素，td和td的高度是相关联的．而div时代
就不同了

程序代码

div和div之间是没有关联，所以就不会向table那样好用了.哪就没有办法解决了吗？
下面我就分享一下几种解决方案
第一种：利用css的Hack

程序代码

实现原理：

块元素必须包含在一个容器里。

应用overflow: hidden 到容器里的元素。

应用 padding-bottom（足够大的值）到列的块元素。

应用margin-bottom（足够大的值）到列的块元素。

padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。

演示：http://www.d8in.com/blog/demo/div_vh/div_hack.html

第二种javascript，利用javascript计算高度最后渲染显示

程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
<script type="text/javascript">
/*
------------------------------------------------
PVII Equal CSS Columns scripts
Copyright (c) 2005 Project Seven Development
www.projectseven.com
Version: 1.5.0
------------------------------------------------
*/
function P7_colH(){ //v1.5 by PVII-www.projectseven.com
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(){ //v1.5 by PVII-www.projectseven.com
if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){
P7_colH();
}
}

function P7_equalCols(){ //v1.5 by PVII-www.projectseven.com
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){ //v1.5 by PVII-www.projectseven.com
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>
</head>
<body onload="P7_equalCols('left','right')">
  <style type="text/css">
/*   .sideleft, .sideright{
padding-bottom: 32767px;
   margin-bottom: -32767px;
}*/
   .sideleft{
     width: 120px;
    position: absolute;
    top: 0;
    left: 0px;
    background-color: #FF9900;
   }
   .sideright{
     background-color: #E8F3FF;
     margin-left:120px;
     position: relative;
   }
   .main{
     width: 100%;
    position: relative;
top: 0px;
left: 0px;
   }
  </style>

<div class="main">
<div id="left" style="" class="sideleft">www.d8in.com</div>
   <div id="right" style="height:1px;" class="sideright">
   www.d8in.com<br />
   www.d8in.com<br />
   www.d8in.com<br />
   www.d8in.com<br />
   www.d8in.com<br />
   www.d8in.com<br />
   www.d8in.com<br />
   </div>
</div>

</body>
</html>

实现原理：
在body标签里面增加onload="P7_equalCols('left','right')，left和right是要一样高度的
div,如果你要更多的话，就把相应的div的id放进去就好了．
计算div的高度，让所有的div的高度用所有div最高的那个高度．

演示：http://www.d8in.com/blog/demo/div_vh/div_js.html

第三种利用背景图片

哈哈这个我就不用多说了吧，就是计算好尺寸然后用背景图片铺下来

程序代码