网站首页
关于深山
客户案例
业务范围
联系深山
网络投票系统
企业网站建设
旅行社网站建设
小程序
留言板
技术文章
许愿墙(qq爱墙)
技术首页
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
asp.net
DIV+CSS
HTML
SEO搜索引擎忧化
下载类信息
个人空间
代码生成
电商
python
页面特效
表格特效
导航菜单
图形特效
表单特效
时间日期
色彩类别
链接特效
网页特效
系统硬件
网站公告
网页学习
技术类文章
网站类信息
订阅本栏目 RSS
您所在的位置:
深山工作室
>
页面特效
> 正文
脚本控制三行三列自适应高度DIV布局
深山行者个人网站 2009/7/28 14:36:42 深山行者 字体:
大
中
小
浏览 7596
以下为详细代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>脚本控制三行三列自适应高度DIV布局</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript"> function P7_colH(){ 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); } } </script> <style type="text/css"> body { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 75%; PADDING-BOTTOM: 0px; MARGIN: 5px; LINE-HEIGHT: 100%; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif } #header { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px } #mid { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px } #footer { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px } #header { BACKGROUND: #f4f4f4; MARGIN-BOTTOM: 5px; HEIGHT: 60px } h3 { MARGIN: 0px; COLOR: #708090; PADDING-TOP: 25px; TEXT-ALIGN: center } h5 { MARGIN: 0px; COLOR: #708090; PADDING-TOP: 25px; TEXT-ALIGN: center } #fbox { BACKGROUND: #f1f1f1; FLOAT: left; WIDTH: 195px } #mbox { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #dff7ff; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 5px; WIDTH: 360px; PADDING-TOP: 0px } #sbox { BACKGROUND: #ffebcc; FLOAT: right; WIDTH: 195px } p { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px; TEXT-INDENT: 2em; LINE-HEIGHT: 130%; PADDING-TOP: 10px } #footer { CLEAR: both; BORDER-TOP: #ffffff 5px solid; BACKGROUND: #cddbed; HEIGHT: 60px; TEXT-ALIGN: center } </style> <meta content="MSHTML 6.00.2800.1515" name="GENERATOR" /> </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>仅供演示</h5> </div> </body> </html>
前一页:
滑动展开/收缩广告(兼容ff/ie6/ie7)
后一页:
符合标准的正常工作的对联广告(2)
相关阅读
ASP FSO的一些方法与拥有的属性
CSS教程:li和ul标签具体用法举例
获取客户真实IP地址
海韵幼儿园网站
uni-app开发的微信小程序在线支付
让asp立即输出缓存(Response.flush),实时显示进度
asp从a到z循环输出26个英文字母
符合标准的正常工作的对联广告(2)
更多信息>>
栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>
同类信息
jquery下拉到某个固定位置然后某些元素发生改变样式状态
canvas绘制的文字如何换行
兼容pc、移动端用js实现复制内容到剪切板(支持苹果safari浏览器)
js兼容多个浏览器右下角漂浮广告
兼容ie6+和火狐的禁止右键
做在线客服时,聊天窗口的div滚动条始终在底部
更多>>
最新添加文章
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
Android移动端自动化测试:使用UIAutomatorViewer与Selenium定位元素
抖音直播音挂载小雪花 懂车帝小程序
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
在Android、iOS、Windows、MacOS中微信小程序的文件存放路径
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
更多>>
随机抽取信息
div默认高度根据内容自动适应高度
利用window.open函数控制弹出窗口,设置个性的弹出窗口
蒸汽消音器
asp中qequest读取优先级顺序(通过优化之后提高速度)
asp之自动闭合UBB标签函数
深山留言板2.14情人节留言板模板v4.8
更多标签
热门标签
叛断
eof
拼音
风格
photoshop
链接样式
loading
工作
物理
深山旅游网站管理系统V1.0
放大
base
柱状图
document
适应
list
window
innerHTML
页面
插件
DW
文字垂直居中
ul
客户端
上 下 左 右
中英
V3.1
替换
读取
注册表
CAD
Abandon
绝对定位
maryabbsby
tag
透明
对象
眼睛
调用
上一页
缩放
项目
跳转
工具
保留
163
渐隐
asp
windows
style
免责声明:本站所有资料信息,有部分为本人原创,部分为从网络收集而来,仅供网友查看阅读所用,所有信息版权归信息所有人或所有公司所有
如果信息内容侵犯到您的版权或权益请与我们联系,经确认后我们会立即移除相关内容或链接
Copyright © 2007-2026
深山工作室
All Rights Reserved
服务QQ:
565449214
手机:
13961347334
ICP备案:
苏ICP备15019627号
苏公网安备 32070502010230号