In diesem Beispiel wird ein JS-Skript verwendet, um die Höhe paralleler DIVs zu steuern. Im DIV-Layout war die adaptive Höhe im Allgemeinen ein Problem. Im Allgemeinen werden Hintergrundbilder, äußere DIVs, rechte Spalten, die die linken Spalten abdecken, usw. verwendet. . Nach dem Hinzufügen des Skripts ist es jetzt viel einfacher. Wenn es drei horizontal parallele DIVs gibt, fbox, mbox und sbox, schreiben Sie einfach in das Tag
sbox ')", Testbedingungen: ie5.x, ie6.0, FF1.03, NS7.2, opera8.01.
Endeffekt.
JS-Code: Das Urheberrecht liegt beim ursprünglichen Autor und dient nur dem Studium und der Forschung
/*
----------------------------- ------------ ----------
PVII Equal CSS Columns scripts
Copyright (c) 2005 Project Seven Development
www.projectseven.com
Version: 1.5.0
-- -------------------------------------- ---------
* /
Funktion P7_colH(){ //v1.5 von PVII-www.projectseven.com
var i,oh,hh,h=0,dA =document.p7eqc,an=document.p7eqa;if( dA&&dA.length){
for(i=0;i
oh=dA[i].offsetHeight;h=(oh>h)?oh:h;}for(i=0;i dA[i].style.height=h+'px';}else{P7_eqA(dA[i].id,dA[i].offsetHeight,h);} }if(an){
for(i= 0;ih){
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 von PVII-www.projectseven.com
if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw ! =document.body.offsetWidth){
P7_colH ();}
}
function P7_equalCols(){ //v1.5 von PVII-www.projectseven.com
if(document.getElementById ){document.p7eqc=new Array;for(i= 0;idocument.p7eqc[i]=document.getElementById(arguments[i]);} setInterval("P7_eqT( )",10);}
}
function P7_eqA(el,h,ht){ //v1.5 von 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 }