当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 脚本控制三行三列自适应高度DIV布局

CSS样式表
css 块状元素和内联元素
CSS 盒模型、块状元素与内联元素、CSS选择器
css 浮动 理解Float的含义
CSS 清除浮动Clear
CSS 制作网页导航条(上)
CSS 制作网页导航条(下)
css 浮动(float)页面布局
css 浮动(float)页面布局(下)
css position 定位
css 定位应用实例
CSS Hack 有关浏览器兼容方面
css 单图片按钮实例(css 图片变换)
使用X-UA-Compatible来设置IE浏览器兼容模式
div overflow 超出隐藏属性使用说明
CSS 使用规则总结
div+CSS 兼容小摘
CSS的inherit与auto使用分析
如何组织和注释CSS文件
CSS样式按整洁易懂的结构组织
CSS Prism 查看和编辑CSS中用到的颜色

CSS样式表 中的 脚本控制三行三列自适应高度DIV布局


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 75 ::
收藏到网摘: n/a

这个例子是用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);}
}

点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]