ホームページ > ウェブフロントエンド > CSSチュートリアル > スクリプト制御 3 行 3 列アダプティブ高さ DIV レイアウト_エクスペリエンス交換

スクリプト制御 3 行 3 列アダプティブ高さ DIV レイアウト_エクスペリエンス交換

WBOY
リリース: 2016-05-16 12:09:19
オリジナル
1813 人が閲覧しました

この例では、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 }



[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート