DIV CSS网页布局：三行三列自适应高度的DIV布局

最新推荐文章于 2021-10-05 19:38:56 发布

abc0412

最新推荐文章于 2021-10-05 19:38:56 发布

阅读量407

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/Fernando/archive/2007/12/29/1020064.html

版权

这个例子是用JS脚本控制并列DIV的高度,通常在DIV布局中,自适应高度一直是比较头疼的问题,一般大都采用背景图、外套DIV、右栏覆盖左栏来解决。现在加了脚本后，简单多了，假如有三个水平并列的DIV，fbox、mbox、sbox,只要在<body>标签中写入：οnlοad="P7_equalCols('fbox','mbox','sbox')"，测试条件：ie5.x、ie6.0、FF1.03、NS7.2、opera8.01

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

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" >

< HTML lang =en xml:lang ="en" xmlns ="http://www.w3.org/1999/xhtml" >< HEAD >< TITLE > 脚本控制三行三列自适应高度DIV布局 </ TITLE >

< META http-equiv =Content-Type content ="text/html; charset=gb2312" >

< SCRIPT type =text/javascript >

/**//*

------------------------------------------------

PVII Equal CSS Columns scripts

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);}

}

</ SCRIPT >

< STYLE type =text/css >

BODY {

}{

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 75%; PADDING-BOTTOM: 0px; MARGIN: 5px; LINE-HEIGHT: 100%; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif

}

#header {

}{

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px

}

#mid {

}{

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px

}

#footer {

}{

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px

}

#header {

}{

BACKGROUND: #f4f4f4; MARGIN-BOTTOM: 5px; HEIGHT: 60px

}

H3 {

}{

MARGIN: 0px; COLOR: #708090; PADDING-TOP: 25px; TEXT-ALIGN: center

}

H5 {

}{

MARGIN: 0px; COLOR: #708090; PADDING-TOP: 25px; TEXT-ALIGN: center

}

#fbox {

}{

BACKGROUND: #f1f1f1; FLOAT: left; WIDTH: 195px

}

#mbox {

}{

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #dff7ff; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 5px; WIDTH: 360px; PADDING-TOP: 0px

}

#sbox {

}{

BACKGROUND: #ffebcc; FLOAT: right; WIDTH: 195px

}

P {

}{

PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px; TEXT-INDENT: 2em; LINE-HEIGHT: 130%; PADDING-TOP: 10px

}

#footer {

}{

CLEAR: both; BORDER-TOP: #ffffff 5px solid; BACKGROUND: #cddbed; HEIGHT: 60px; TEXT-ALIGN: center

}

</ STYLE >

< META content ="MSHTML 6.00.2900.2873" name =GENERATOR ></ HEAD >

< BODY onload ="P7_equalCols('fbox','mbox','sbox')" >

< DIV id =header >

< H3 > 脚本控制三行三列自适应高度DIV布局 </ H3 ></ DIV >

< DIV id =mid >

< DIV id =fbox >