Maison > Article > interface Web > Le script contrôle trois lignes et trois colonnes à hauteur adaptative DIV layout_Experience Exchange
Le script contrôle trois lignes et trois colonnes à hauteur adaptative DIV layout_Experience Exchange
- WBOYoriginal
- 2016-05-16 12:09:191735parcourir
Cet exemple utilise un script JS pour contrôler la hauteur des DIV parallèles. Habituellement, dans la disposition DIV, la hauteur adaptative a toujours été un casse-tête. Généralement, les images d'arrière-plan, les DIV externes, les colonnes de droite couvrant les colonnes de gauche, etc. . Maintenant, après avoir ajouté le script, c'est beaucoup plus simple. S'il y a trois DIV parallèles horizontalement, fbox, mbox et sbox, écrivez simplement dans la balise
sbox ')", conditions de test : ie5.x, ie6.0, FF1.03, NS7.2, opera8.01. Effet final.Code JS : Le droit d'auteur appartient à l'auteur original et est destiné à l'étude et à la recherche uniquement
Copiez le code Le code est le suivant :
/*
----------------------------- ------------ ----------
Scripts de colonnes CSS égales PVII
Copyright (c) 2005 Project Seven Development
www.projectseven.com
Version : 1.5.0
-- -------------------------------------- ---------
* /
fonction P7_colH(){ //v1.5 par PVII-www.projectseven.com
var i,oh,hh,h=0,dA =document.p7eqc,an=document.p7eqa;if( dA&&dA.length){
for(i=0;ioh=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 par PVII-www.projectseven.com
if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw ! =document.body.offsetWidth){
P7_colH ();}
}
function P7_equalCols(){ //v1.5 par 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 par 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 }
----------------------------- ------------ ----------
Scripts de colonnes CSS égales PVII
Copyright (c) 2005 Project Seven Development
www.projectseven.com
Version : 1.5.0
-- -------------------------------------- ---------
* /
fonction P7_colH(){ //v1.5 par PVII-www.projectseven.com
var i,oh,hh,h=0,dA =document.p7eqc,an=document.p7eqa;if( dA&&dA.length){
for(i=0;i
for(i= 0;i
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 par PVII-www.projectseven.com
if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw ! =document.body.offsetWidth){
P7_colH ();}
}
function P7_equalCols(){ //v1.5 par PVII-www.projectseven.com
if(document.getElementById ){document.p7eqc=new Array;for(i= 0;i
}
function P7_eqA(el,h,ht){ //v1.5 par 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
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn