脚本控制三行三列自适应高度DIV布局_CSS

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

js代码:版权归原作者 ,仅供学习研究.

复制代码代码如下:

/*  
------------------------------------------------  
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 xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 
     
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>脚本控制三行三列自适应高度div布局</title> 
     
    <style type="text/css"> 
     
    </style> 
</head>

<body onload="p7_equalcols('fbox','mbox','sbox')"> 
<div id="header"><h3>脚本控制三行三列自适应高度div布局</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> 
 
</div> 
</body> 
</html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

脚本控制三行三列自适应高度DIV布局

2017年12月12日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论


验证码：