div图层自适应高度显示js代码,很实用的多个图层自适应高度显示特效,根据自己的网站布局来修改这个特效即可。
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren"> <meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。"> <title>三栏div层自适应高度显示js特效_武鸣人</title> <style type="text/css"> /* css Reset */ html,body,div,span,p,h1,h2,h3,h4,h5,h6,img,ol,ul,li,form,input,dl,dt,dd,table,tr,td,em,strong{ margin:0; padding:0; } ul,ol{ list-style:none outside none; } img{ border:none; } h1,h2,h3,h4,h5,h6{ font-size:100%; } .clear{clear:both} /* Reset End */ .box1{width:827px;} .left{border:1px solid orange;width:200px;float:left;} .main{border:1px solid blue;width:400px;float:left;margin-left:10px;} .right{border:1px solid green;float:right;margin-left:10px;width:200px;} </style> </head> <body> <a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr> <!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。--> <script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script> <script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script> <div class="box1"> <div id="left" class="left">左边内容</div> <div id="main" class="main">主要内容<br> 主要内容<br>主要内容<br>主要内容<br>主要内容<br>主要内容<br>主要内容<br>主要内容<br>主要内容<br>主要内容<br>主要内容<br>主要内容<br>主要内容<br></div> <div id="right" class="right">右边内容</div> </div> <script type="text/javascript"> (function(){ var $ = function(e){return document.getElementById(e);} var h = $('main').offsetHeight; $('left').style.height = h+'px'; $('right').style.height = h+'px'; })(); //武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) </script> </body> </html>
本文来自武鸣人网站,转载请注明出处