脚本控制三行三列自适应高度DIV布局
程序员文章站
2023-12-22 15:41:52
这个例子是用js脚本控制并列div的高度,通常在div布局中,自适应高度一直是比较头疼的问题,一般大都采用背景图、外套div、右栏覆盖左栏......来解决。现在加了脚本后...
这个例子是用js脚本控制并列div的高度,通常在div布局中,自适应高度一直是比较头疼的问题,一般大都采用背景图、外套div、右栏覆盖左栏......来解决。现在加了脚本后，简单多了，假如有三个水平并列的div，fbox、mbox、 sbox,只要在<body>标签中写入：onload="p7_equalcols('fbox','mbox','sbox')"，测试条件：ie5.x、ie6.0、ff1.03、ns7.2、opera8.01。。
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);}
}
[ctrl+a 全选 注:如需引入外部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);}
}
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]