CSS布局奇淫技巧之-多列等高

Posted 2020-09-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS布局奇淫技巧之-多列等高相关的知识，希望对你有一定的参考价值。

布局方案

等高布局有几种不同的方法，但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。

代码

先来看下没有等高布局的情况

效果：

然后我们应用等高布局：

效果如下：

在进行具体操作的时候，padding-bottom的值大小取决于你的项目的实际情况，如果不确定，设大一点也无所谓。

最终的代码：

<!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代码：

[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代码：

[html]

* { 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 onload="P7_equalCols(‘Div1‘,‘Div2‘)">, 其中Div1对应的是左侧div的id，Div2对应的是右侧的id

如果是三列布局，可以再自己增加内容，变成 <body onload="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布局奇淫技巧之-多列等高的主要内容，如果未能解决你的问题，请参考以下文章

html奇淫技巧 2 教你如何进行图文环绕布局原创