Home > Article > Web Front-end > 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
- WBOYOriginal
- 2016-05-16 12:09:191735browse
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;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 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
}
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需刷新才能执行]
Statement：
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
Previous article：Use css to create star ratings_Experience exchangeNext article：Use css to create star ratings_Experience exchange