首页 > 代码库 > CSS布局奇淫技巧之-多列等高
CSS布局奇淫技巧之-多列等高
布局方案
等高布局有几种不同的方法，但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。
代码
先来看下没有等高布局的情况
效果：
然后我们应用等高布局：
效果如下：
在进行具体操作的时候，padding-bottom的值大小取决于你的项目的实际情况，如果不确定，设大一点也无所谓。
最终的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>高度自适应布局</title><style>body{ padding:0; margin:0; color:#f00;}.container{ margin:0 auto; width:600px; border:3px solid #00C; overflow:hidden; /*这个超出隐藏的声明在IE6里不写也是可以的*/}.left{ float:left; width:150px; background:#B0B0B0; padding-bottom:2000px; margin-bottom:-2000px;}.right{ float:left; width:450px; background:#6CC; padding-bottom:2000px; margin-bottom:-2000px;}</style></head><body><div class="container"> <div class="left">我是left</div> <div class="right">我是right<br><br><br>现在我的高度比left高，但left用它的padding-bottom补偿了这部分高度</div> <div style="clear:both"></div></div></body></html> |
二. 利用表格嵌套
这种方法就是在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></p><p> </p>
<p></p><p> </p>
</div>
<div class="box">
<p></p><p> </p>
<p><br/><br/><br/><br/></p>
</div>
</td>
<td id="mid_b"> </td>
<td id="right_b">
<div class="box"><br/><br/><br/></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%; }
三、
利用JavaScript脚本
Javascript是最好的Html辅助程序，尤其是前端界面的开发，在自动等高方面，也有专业的脚本。
网上使div等高的Javascript脚本很多，但有些仅仅针对IE浏览器可用，对Firefox、Opera等浏览器无效，所以在选择脚本的时候应该特别注意脚本的跨浏览器兼容性。
下面给大家介绍一个从网上找来的Javascript脚本，并列出使用方法。
Html代码：
<div class="div_top">
这是顶部的div
</div>
<div id="Div1" class="div_left">
左部div <br />
<br/><br /><br />
<br /><br />
<br /><br />
</div>
<div id="Div2" class="div_right">
右部div <br/> <br/> <br/>
</div>
<div class="div_bottom">
这是底部的<br/>
</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自动等高的效果了。
上面的代码是将表格嵌套在wrap这个div中，在这个table中又插入其它div，这样就可以让左右两列达到自动等高的效果。
等高DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#container {
overflow: hidden;
}
#left {
background: #ccc;
float: left;
width: 200px;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#content {
background: #eee;
margin-left: 200px;/*==此值等于左边栏的宽度值==*/
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#left,
#content {
min-height: 200px;
height: auto !important;
height: 200px;
}
</style>
</head>
<body>
<div id="container">
<div id="left" class="aside">Left Sidebar</div>
<div id="content" class="section">Main Content</div>
</div>
</body>
</html>
CSS布局奇淫技巧之-多列等高