脚本控制三行三列自适应高度DIV布局 -- [页面特效]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

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

深山行者个人网站 2009/7/28 14:36:42 深山行者字体:大中小浏览 5986

以下为详细代码

<!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)

相关阅读: 淮安电视台主持人选拔大赛网络投票; 如何加快网站访问速度; MarkMan 马克鳗，让设计更有爱 (超级给力的页面标注工具); 深山行者个人网站程序V0.2 效果图; 连云港电子杂志网站; JS+CSS实现图片放大预览效果(购物时放在产品上面预览图片); 连云港旅游网; 生成最新日期与时间选择（年月日）下拉框

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; 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还有其它的吗

更多>>随机抽取信息: 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 超级强的div+css点击变样式菜单，特别推荐; 红色圣诞老人留言板模板; MarkMan 马克鳗，让设计更有爱 (超级给力的页面标注工具); 一个非常不错的简单的ajax读取新浪rss的小例子; 01. windows xp 安装iis视频教程

更多标签热门标签

FSO txt vb 记录 access 下拉 document 选项简易高度边框 iis 控件居中网页利用position把div放在flash上关闭 instr 压缩跳转采集 DIV+CSS做的透明菜单兼容IE、FF等 letter-spacing 透明 innerText 天气预报滑轮虚拟浮动对象 time mssql 全选混合 Session 货币 PSD 预览美化缩小脚本许愿墙 FlashFxp 容器爱国统计火狐 shift 舒服百度拼音