스크립트는 3개의 행과 3개의 열을 제어하는 ​​적응형 높이 DIV 레이아웃_경험 교환

Contoh ini menggunakan skrip JS untuk mengawal ketinggian DIV selari Biasanya dalam susun atur DIV, ketinggian penyesuaian selalu menjadi pening kepala Umumnya, imej latar belakang, DIV luar, lajur kanan yang meliputi lajur kiri, dsb. . Sekarang selepas menambah skrip, ia adalah lebih mudah Jika terdapat tiga DIV selari mendatar, fbox, mbox dan sbox, tulis sahaja dalam tag : onload="P7_equalCols('fbox','mbox','. sbox ')", syarat ujian: ie5.x, ie6.0, FF1.03, NS7.2, opera8.01. Kesan akhir.

Kod JS: Hak cipta kepunyaan pengarang asal dan untuk kajian dan penyelidikan sahaja

Salin kod Kodnya adalah seperti berikut:

/*
------------------------------------------ ------------ ----------
skrip Lajur CSS PVII Equal
Hak Cipta (c) 2005 Project Seven Development
www.projectseven.com
Versi: 1.5.0
-- -------------------------------------- ---------
* /
fungsi P7_colH(){ //v1.5 oleh 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';}lain{P7_eqA(dA[i].id,dA[i].offsetHeight,h);} }jika(an){
untuk(i= 0;ih){
dA[i].style. ketinggian=(h-(hh-h))+' px';}}}lain{document.p7eqa=1;}
document.p7eqth=document.body.offsetHeight;
document.p7eqtw=document. body.offsetWidth;}
}
fungsi P7_eqT(){ //v1.5 oleh PVII-www.projectseven.com
if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw ! =document.body.offsetWidth){
P7_colH ();}
}
fungsi P7_equalCols(){ //v1.5 oleh 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);}
}
fungsi P7_eqA(el,h,ht){ //v1.5 oleh 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 }

Skrip mengawal tiga baris dan tiga lajur susun atur DIV ketinggian penyesuaian<title> </title> <style type="text/css"> <!-- body{ font-size: 75%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; line-height: 100%; margin: 5px; padding: 0px; } #header,#mid,#footer{ width: 760px; margin: 0px auto; padding: 0px; } #header{ background: #F4F4F4; height: 60px; margin-bottom: 5px; } h3,h5{ padding-top: 25px; color: #708090; text-align: center; margin: 0; } #fbox{ background: #F1F1F1; width: 195px; float: left; } #mbox{ background: #DFF7FF; margin: 0px 5px 0px; padding: 0px; float: left; width: 360px; } #sbox{ background: #FFEBCC; width: 195px; float: right; } p{ margin: 0px; padding: 10px; text-indent: 2em; line-height: 130%; } #footer{ background: #CDDBED; border-top: solid 5px #FFFFFF; text-align: center; height: 60px; clear: both; } --> </style> <div id="header"><h3>Skrip mengawal tiga baris dan tiga lajur susun atur DIV ketinggian penyesuaian</h3></div> <div id="mid"> <div id="fbox"> <p> 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。 使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p> <p> 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。 使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p> </div> <div id="mbox"> <p> 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。 使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p> <p> 如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。 </p> <p> 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。 使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p> <p> 如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。 </p> </div> <div id="sbox"><p> 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。 使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p></div> </div> <div id="footer"> <h5>仅供演示 <a href="javascript:history.back()">Back</a> </h5> <script src="/js/copyrightdemo.js" type="text/javascript"></script> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]