解决列高度自适应(列高度相同)的五种方法

【 tulaoshi.com - Web开发 】

1.背景图填充
这是使用最广泛的一种做法，无hacks，推荐使用：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /titleEqual height(列高度相同的方法)/titlestyle type="text/css"body{ padding: 0; margin: 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif; line-height: 140%; background:#E7DFD3;}#middle{ width: 580px; float:left; background:#FFFFFF; text-align:left;}#header,#footer{ background: #E8E8E8; width: 750px; text-align:center;}#sideleft{ width: 580px; float: left; position:relative; margin-left:-580px;}#sideright{ width: 170px; float: right; position:relative; margin: 0 -170px 0 0; background: #F0F0F0;}#footer{ clear:both; }h1,h2,address,p{ margin: 0; padding: .8em;}h1,h2{font-size: 20px;}/stylescript type="text/javascript"// ![CDATA[function toggleContent(name,n) { var i,t='',el = document.getElementById(name); if (!el.origCont) el.origCont = el.innerHTML; for (i=0;in;i++) t += el.origCont; el.innerHTML = t; }// ]]/script/headbody div id="header"h1Head/h1 div id="middle" div id="sideright" div id="sideleft"h2sideleft/h2 pa href="javascript:toggleContent('sideleft',1)"默认长度/a  a href="javascript:toggleContent('sideleft',2)"加长页面/a/pp 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 /pp 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 /pp 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 /pp 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 /pp 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 /p /div h2sideright/h2 p 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 /pp 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 /pp 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 /pp 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 /p /div/div div id="footer"address Footer/addressp制作：a href="http://homepage.yesky.com"网页陶吧/a/p /div/body/htmlscript language="Javascript" var now = new Date(); document.write("img src='http://counter.yesky.com/counter.shtml？CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'"); /script noscript img src="http://counter.yesky.com/counter.shtml？CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/ /noscript
运行代码复制代码另存代码

2.采用脚本控制列的高度（一）
需要事先知道哪列的高度，以此为基准用脚本控制。

document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"
上面的代码是以sideright的基准高度来控制sideleft的高度。

代码简单，但比较被动：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /titleEqual height(使用JS实现列高度相同的方法)/titlestyle type="text/css"body{ padding: 0; margin: 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif; line-height: 140%; text-align: center; background:#E7DFD3;}#wrap{ width: 750px; margin: 0 auto; /*overflow: hidden;* </div> <p style="color:#333;margin:10px 0;">来源:http://www.tulaoshi.com/n/20160219/1604487.html</p> </div> <div id="tls-pages" class="tls-pages"></div> <ul class="pages-two"> <li class="pages-two-item"> <span>上一篇：</span> <a href="/n/20160219/1604485.html">读取Access数据库表名实例</a> </li> <li class="pages-two-item"> <span>下一篇：</span> <a href="/n/20160219/1604488.html">破除网页鼠标右键禁用的十大绝招</a> </li> </ul> </div> </div> <div class="contain-left read-more"> <p class="inter-tit rel"> <a href="javascript:;">看过《解决列高度自适应(列高度相同)的五种方法》的人还看了以下文章</a> <a href="/diannao/" class="C_hs_nr_111_a">更多>></a> </p> <ul class="read-list clearfix style-circle"> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1604487.html">解决列高度自适应(列高度相同)的五种方法</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1618008.html">CSS三行三列自适应高度div布局</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1621730.html">CSS三行三列DIV高度自适应的设置</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1621608.html">CSS布局自适应高度解决方法</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1630870.html">.clear方法解决网页自适应高度的问题</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1607320.html">jQuery解决iframe高度自适应代码</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1621557.html">Div + CSS高度自适应解决方案</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1483321.html">Div + CSS 高度自适应解决方案</a> <span class="fr">01-29</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1615361.html">第10天:自适应高度</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1604467.html">关于IFRAME 自适应高度的研究</a> <span class="fr">02-19</span> </li> </ul> </div> <div class="contain-left site-output"><script>tls.output.www_news('banner2_780')</script></div> <div class="contain-left site-output"><script>tls.output.www_news('banner3_780')</script></div> <div class="vertical-tab-box contain-left"> <div class="recommend-tit clearfix"> <div class="recommend-tit-cont">延伸阅读</div> </div> <div class="lx-news-box"> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1595963.html">自适应高度框架 ----属个人收藏内容</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1595963.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/7e66889eacb94f1a42edbd815863d14d_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> <div class="ks-news-desc"> main.htm: html       head          meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312' /          meta  name='author'  c...</div> </div> </div> <div class="site-output"><script>tls.output.www_news('banner4_780')</script></div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1606618.html">WEB标准布局的Div + CSS 高度自适应解决方法</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1606618.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/6d44f03500c715303fd798fbe9bdab05_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> <div class="ks-news-desc">自适应高度的问题，采用 Div + CSS 进行三列或二列布局时，事先不知道具体高度，只能根据内容的增减自适应高度，要使两列（或三列）的高度相同，用 Table 很容易实现，但采用 Div + CSS 就显得比较麻烦了。按照一般的做法，大都采用背景图填充或 JS 脚本的方法使高度相同，但这些都不是最好的办法，我认为… 下面介绍采用“隐藏容器溢出”和“...</div> </div> </div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1623917.html">利用JAVASCRIPT让IFRAME框架的高度自适应</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1623917.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/161770e5a23deb5ebed4aa3d02d949fd_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> <div class="ks-news-desc"> 页面内嵌不同的网页内容时，导致iframe的高度无法与实现内容或浏览器高度相匹配。窗口大小变换时，不能iframe不能进行自动调整。这里，我们利用JAVASCRIPT让IFRAME框架的高度自适应。 首先，写出如下的JS方法。 /**  * 内嵌页面的高度设置  */ function handleFrameLoad() {  var hDoc = getBodyHeight(document); &n...</div> </div> </div> <div class="site-output"><script>tls.output.www_news('banner5_780')</script></div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1485329.html">Xhtml第10天:div自适应高度</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160129/1485329.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201601/29/89e19cb71fd833f92d9a51eae13b0b4b_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/html/" target="_blank">Html</a> <a href="http://www.tulaoshi.com/cssbuju/" target="_blank">CSS布局</a> <a href="http://www.tulaoshi.com/divcss/" target="_blank">Div+CSS</a> <a href="http://www.tulaoshi.com/xhtml/" target="_blank">XHTML</a> </div> <div class="ks-news-desc"> 如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个div中，就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面)： #pagebox {p...</div> </div> </div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1593532.html">javascript应用：Iframe自适应其加载的内容高度</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1593532.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/39debe5e83e4d7a280bb9dee331bfe6e_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> <div class="ks-news-desc"> main.htm:  代码如下： html        head           meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312'           meta  ...</div> </div> </div> <div class="news-more-btn"> <a class="btn btn-block btn-default" title="查看更多精彩" href="/diannao/">查看更多精彩>></a> </div> </div> </div> <div class="contain-left site-output"><script>tls.output.www_news('banner6_780')</script></div> </div> <!--width 300--> <div class="conter_300"> <div class="contain-right site-output"><script>tls.output.www_news('right1_300')</script></div> <div class="Member clearfix"> <div class="Menber_tx_1 rel"> <a href="/user/jakcerw/1/"> <img class="member-img" src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/27.jpg" width="70" height="70" alt="jakcerw"> </a> <a href="/user/jakcerw/1/" id="username">jakcerw</a> </div> <div class="Menber_tx_ww"> <div class="Menter_tx_ww_1"> <p>经验教程</p> <a href="/user/jakcerw/1/">91</a> </div> <div class="Menter_tx_ww_1 right_j"> <p>收藏</p> <a href="/user/jakcerw/2/">67</a> </div> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right2_300')</script></div> <!--最新文章、热门文章--> <div class="hop_gg clearfix js-tab"> <div class="hop_gg_s clearfix tab_control2"> <a class="js-tab-item active" href="javascript:;">最新文章</a> </div> <div class="hop_gg_xg2_box"> <div class="hop_gg_xg2 js-tab-list active"> <ul> <li><a href="http://www.tulaoshi.com/n/20160219/1604485.html">读取Access数据库表名实例</a></li> <li><a href="http://www.tulaoshi.com/n/20160219/1604484.html">香蕉元素logo作品</a></li> <li><a href="http://www.tulaoshi.com/n/20160219/1604483.html">Declarations and Access Control (2)</a></li> <li><a href="http://www.tulaoshi.com/n/20160219/1604482.html">想认真学摄影买什么相机好？</a></li> <li><a href="http://www.tulaoshi.com/n/20160219/1604481.html">VB通过DAO访问Access数据库</a></li> </ul> </div> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right3_300')</script></div> <div class="hop_gg clearfix js-tab newest-msg"> <div class="hop_gg_s clearfix"> <a href="javascript:;" class="js-tab-item active" >Web开发</a> </div> <div class="hop_gg_xg2_box"> <div class="hop_gg_xg2 js-tab-list active" > <ul class="news-list mt5 has-ad-list"> <li class="news-list-item"> <span class="range-type">01</span> <a href="http://www.tulaoshi.com/n/20171121/2766880.html">开发一个网站需要做哪些准备 搭建网站步骤</a> </li> <li class="news-list-item"> <span class="range-type">02</span> <a href="http://www.tulaoshi.com/n/20171114/2765722.html">成为高级工程是要具备什么</a> </li> <li class="news-list-item"> <span class="range-type">03</span> <a href="http://www.tulaoshi.com/n/20170112/2607885.html">谷歌开发者中国网站涵盖什么</a> </li> <li class="news-list-item"> <span class="range-type">04</span> <a href="http://www.tulaoshi.com/n/20160220/1633591.html">CSS入门教程——样式表加入网页方式</a> </li> </ul> </div> </div> <div class="site-output"><script>tls.output.www_news('right4_300')</script></div> </div> <div class="fixed-right"> <div class="hop_gg clearfix"> <h3>精华推荐</h3> <div class="jinghua-list"> <dl class="jinghua-item clearfix"> <dt class="jinghua-item-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1590318.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/56c627ecff42cd6f46c4d6fc500f8ad6_thumb_189.jpg" alt="让iframe自适应高度（支持XHTML支持FF）"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="http://www.tulaoshi.com/n/20160219/1590318.html">让iframe自适应高度（支持XHTML支持FF）</a> </p> <p class="jinghua-item-tag">bahganbi83166</p> </dd> </dl> <dl class="jinghua-item clearfix"> <dt class="jinghua-item-img fl"> <a href="http://www.tulaoshi.com/n/20160129/1483844.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201601/29/f166263bdf1e45ce0b954f63b17aa5ae_thumb_189.jpg" alt="使用Web标准建站第10天：自适应高度"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="http://www.tulaoshi.com/n/20160129/1483844.html">使用Web标准建站第10天：自适应高度</a> </p> <p class="jinghua-item-tag">home梦想的味道</p> </dd> </dl> <div class="site-output"><script>tls.output.www_news('right5_300')</script></div> <dl class="jinghua-item clearfix"> <dt class="jinghua-item-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1610038.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/28d5985aa6963f429170521220533256_thumb_189.jpg" alt="IE7、FF DIV高度不能自适应问题的解决方案"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="http://www.tulaoshi.com/n/20160219/1610038.html">IE7、FF DIV高度不能自适应问题的解决方案</a> </p> <p class="jinghua-item-tag">情断魂牵</p> </dd> </dl> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right6_300')</script></div> <!--百科推荐--> <div class="hop_gg clearfix"> <h3>热门标签</h3> <div class="hot-tag-box-item"> <a class="hot-tag col_9" href="http://www.tulaoshi.com/webkaifa/" title="Web开发">Web开发</a> <a class="hot-tag col_2" href="http://www.tulaoshi.com/web/" title="web">web</a> <a class="hot-tag col_1" href="http://www.tulaoshi.com/chengxukaifa/" title="程序开发">程序开发</a> <a class="hot-tag col_6" href="http://www.tulaoshi.com/webgongju/" title="WEB工具">WEB工具</a> <a class="hot-tag col_8" href="http://www.tulaoshi.com/yidongkaifa/" title="移动开发">移动开发</a> <a class="hot-tag col_7" href="http://www.tulaoshi.com/webbiaozhun/" title="Web标准">Web标准</a> <a class="hot-tag col_3" href="http://www.tulaoshi.com/kaifagongju/" title="开发工具">开发工具</a> <a class="hot-tag col_9" href="http://www.tulaoshi.com/younaokaifa/" title="宝宝右脑开发">宝宝右脑开发</a> <a class="hot-tag col_6" href="http://www.tulaoshi.com/webfuwuqi/" title="WEB服务器">WEB服务器</a> <a class="hot-tag col_3" href="http://www.tulaoshi.com/webyingyongchengxu/" title="web应用程序">web应用程序</a> <a class="hot-tag col_1" href="http://www.tulaoshi.com/gaodujinshi/" title="高度近视">高度近视</a> <a class="hot-tag col_6" href="http://www.tulaoshi.com/diaodenggaodu/" title="吊灯高度">吊灯高度</a> <a class="hot-tag col_3" href="http://www.tulaoshi.com/kualiejuzhong/" title="跨列居中">跨列居中</a> <a class="hot-tag col_4" href="http://www.tulaoshi.com/pptpeisedesanzhongfangfa/" title="PPT配色的三种方法">PPT配色的三种方法</a> <a class="hot-tag col_6" href="http://www.tulaoshi.com/wenmeidejizhongfangfa/" title="纹眉的几种方法">纹眉的几种方法</a> <a class="hot-tag col_4" href="http://www.tulaoshi.com/exceldiaozhengbianjilangaodu/" title="Excel调整编辑栏高度">Excel调整编辑栏高度</a> <a class="hot-tag col_6" href="http://www.tulaoshi.com/fendiyebaocundesanzhongfangfa/" title="粉底液保存的三种方法">粉底液保存的三种方法</a> <a class="hot-tag col_8" href="http://www.tulaoshi.com/excelshezhibiaotoudeduozhongfangfa/" title="Excel设置表头的多种方法">Excel设置表头的多种方法</a> <a class="hot-tag col_4" href="http://www.tulaoshi.com/excelzenmediaozhengbianjilangaodu/" title="Excel怎么调整编辑栏高度">Excel怎么调整编辑栏高度</a> <a class="hot-tag col_6" href="http://www.tulaoshi.com/caidaoshengxiulesizhongfangfachuxiu/" title="菜刀生锈了四种方法除锈">菜刀生锈了四种方法除锈</a> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right0_300')</script></div> </div> </div> <div class="float_bottom js-share-box" id="fixbottom"> <div class="float_bot_1"> <a href="javascript:;" class="icon-share icon-share71" id="weixin_show_btn"></a> <img src="https://pan.baidu.com/share/qrcode?w=150&h=150&url=http://m.tulaoshi.com/n/20160219/1604487.html" style="right:0;left:0;top:-130px;display:none; border:1px solid #e5e5e5; background:#fff; padding:10px; width:100px" id="weixin_show"> </div> <a href="javascript:;" class="icon-share icon-share11 js-share-weibo">微博分享</a> <a href="javascript:;" class="icon-share icon-share21 js-share-qq">QQ分享</a> <a href="javascript:;" class="icon-share icon-share31 js-share-qzone">QQ空间</a> <a href="http://m.tulaoshi.com/n/20160219/1604487.html" class="icon-share icon-share41">手机页面</a> <a href="javascript:;" class="icon-share icon-share51" id="fav_site_btn" data-url="http://www.tulaoshi.com/n/20160219/1604487.html">收藏网站</a> <a href="javascript:;" class="icon-share icon-share61" id="totop">回到头部</a> </div> <div class="c_xins" style="display:none;"> <a href="http://m.tulaoshi.com/n/20160219/1604487.html"> 解决列高度自适应(列高度相同)的五种方法 移动版</a> </div> </div> <!--footer底部--> <script type="text/javascript">tls.output.show_foot();</script> <!-- 尾部 --> <!--www_news PC内容页面--> <script src="http://static.tulaoshi.com/js/pc_show.min.js"></script> </body> </html>