Home > Web Front-end > CSS Tutorial > Script controls three rows and three columns adaptive height DIV layout_Experience exchange

Script controls three rows and three columns adaptive height DIV layout_Experience exchange

WBOY
Release: 2016-05-16 12:09:19
Original
1795 people have browsed it

This example uses JS script to control the height of parallel DIVs. Usually in DIV layout, adaptive height has always been a headache. Generally, background images, outer DIVs, right columns covering the left columns, etc. are used to solve the problem. . Now after adding the script, it is much simpler. If there are three horizontally parallel DIVs, fbox, mbox, and sbox, just write in the tag: onload="P7_equalCols('fbox','mbox','sbox ')", test conditions: ie5.x, ie6.0, FF1.03, NS7.2, opera8.01. Final effect.

JS code: The copyright belongs to the original author and is for study and research only.

Copy the code The code is as follows:

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


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template