脚本控制三行三列自适应高度DIV布局

最新推荐文章于 2021-07-03 13:50:03 发布

veiny

最新推荐文章于 2021-07-03 13:50:03 发布

阅读量650

点赞数

分类专栏： Others 文章标签：脚本 div html css c

本文链接：https://blog.csdn.net/veiny/article/details/3532401

版权

Others 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

CSS

 
 #fbox,#mbox,#sbox{
width:250px;
float:left;
margin:0 5px;
border:1px solid #009;
}
 

HTML

 
 <body onload="P7_equalCols('fbox','mbox','sbox')">
<div id="fbox">亲和力指的并不只是
</div>
<div id="mbox">
   <br />
   <br />
   <br />
</div>
<div id="sbox">
<p>亲和力指不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -    你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>的并
</div>
</body>
 

JS JS

 
 /* 
  ------------------------------------------------
  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);
  }
}
 

CSDN垃圾编辑器~！~！

veiny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
脚本控制三行三列自适应高度DIV布局

CSS #fbox,#mbox,#sbox{width:250px;float:left;margin:0 5px;border:1px solid #009;}HTML body onload="P7_equalCols(fbox,mbox,sbox)">div id="fbox">亲和力指的并不只是div>div id="
复制链接

扫一扫