ホームページ > 記事 > ウェブフロントエンド > スクリプト制御 3 行 3 列アダプティブ高さ DIV レイアウト_エクスペリエンス交換
スクリプト制御 3 行 3 列アダプティブ高さ DIV レイアウト_エクスペリエンス交換
- WBOYオリジナル
- 2016-05-16 12:09:191735ブラウズ
この例では、JS スクリプトを使用して並列 DIV の高さを制御します。通常、DIV レイアウトでは高さの調整が常に問題であり、背景画像、外側の DIV、左側の列を覆う右側の列などが使用されます。 。スクリプトを追加した後は、fbox、mbox、sbox という 3 つの水平方向の並列 DIV がある場合は、
に次のように記述するだけです。 sbox ')"、テスト条件: ie5.x、ie6.0、FF1.03、NS7.2、opera8.01。 最終効果。JS コード: 著作権はオリジナルの作成者に属し、調査および研究のみを目的としています。
コードをコピーしてください コードは次のとおりです:
/*
----------------------------- ------------ ----------
PVII Equal CSS Columns スクリプト
Copyright (c) 2005 Project Seven Development
www.projectseven.com
バージョン: 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=新しい配列;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 }
----------------------------- ------------ ----------
PVII Equal CSS Columns スクリプト
Copyright (c) 2005 Project Seven Development
www.projectseven.com
バージョン: 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=新しい配列;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需刷新才能执行]
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSを使用して星評価を作成_体験交流次の記事：CSSを使用して星評価を作成_体験交流