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

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

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;* </article> </section> <section class="article-more"> <div class="rel mask-box"> <div class="content-mask"></div> <div class="content-more js-content-more">展开更多 <span>（<span class="cont-remain">50</span>%）</span> <i class="icon-arrow"></i> </div> </div> <div class="gg show-pageup" data-id="pageup"></div> <div class="soshm-box"> <div class="soshm-title"><span>分享</span></div> <div id="soshm-box"></div> </div> <div class="gg show-pagedown" data-id="pagedown"></div> <div id="wechat"></div> </section><section class="section you-like"> <header class="section-header"> <h3 class="section-title">猜你喜欢</h3> <div class="section-toolbar"> <a class="section-more" href="javascript:;" title="查看更多相关文章"> <span></span> <span></span> <span></span> </a> </div> </header> <div id="bd-recommend"></div> <div class="article-list"> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160219/1604487.html" title="解决列高度自适应(列高度相同)的五种方法">解决列高度自适应(列高度相同)的五种方法</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160219/1604487.html" title="解决列高度自适应(列高度相同)的五种方法"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/19/e3933a008e71a961f2bef7bb760acc6a_thumb_189.jpg" alt="解决列高度自适应(列高度相同)的五种方法"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160219/1618008.html" title="CSS三行三列自适应高度div布局">CSS三行三列自适应高度div布局</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160219/1618008.html" title="CSS三行三列自适应高度div布局"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/19/47fd258821b31c18f7ae3eef6ce65869_thumb_189.jpg" alt="CSS三行三列自适应高度div布局"></a> </div> </div> <div class="gg" data-id="content1"></div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20171117/2766281.html" title="s8lol主宰符文怎么配">s8lol主宰符文怎么配</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/yingxionglianmeng/" target="_blank">英雄联盟</a> <a href="http://m.tulaoshi.com/wangluoyouxi/" target="_blank">网络游戏</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20171117/2766281.html" title="s8lol主宰符文怎么配"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201711/17/2b6780a6d697ab474ec43d2b143a8c33.jpg" alt="s8lol主宰符文怎么配"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160219/1621730.html" title="CSS三行三列DIV高度自适应的设置">CSS三行三列DIV高度自适应的设置</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160219/1621730.html" title="CSS三行三列DIV高度自适应的设置"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/19/612a57ef2ba1a19aa57dd5e8c35e2492_thumb_189.jpg" alt="CSS三行三列DIV高度自适应的设置"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160219/1621608.html" title="CSS布局自适应高度解决方法">CSS布局自适应高度解决方法</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160219/1621608.html" title="CSS布局自适应高度解决方法"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/19/f3fbd523d46e5f7f998560373d7a32cf_thumb_189.jpg" alt="CSS布局自适应高度解决方法"></a> </div> </div> <div class="gg" data-id="content2"></div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20171116/2766194.html" title="lol偷钱流符文搭配推荐">lol偷钱流符文搭配推荐</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/yingxionglianmeng/" target="_blank">英雄联盟</a> <a href="http://m.tulaoshi.com/wangluoyouxi/" target="_blank">网络游戏</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20171116/2766194.html" title="lol偷钱流符文搭配推荐"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201711/16/68ce3c7443802f29f089fd2b8aeacfac.jpg" alt="lol偷钱流符文搭配推荐"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160219/1630870.html" title=".clear方法解决网页自适应高度的问题">.clear方法解决网页自适应高度的问题</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160219/1630870.html" title=".clear方法解决网页自适应高度的问题"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/19/a3b6e02413da2768b1395c773ea7d470_thumb_189.jpg" alt=".clear方法解决网页自适应高度的问题"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160219/1607320.html" title="jQuery解决iframe高度自适应代码">jQuery解决iframe高度自适应代码</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160219/1607320.html" title="jQuery解决iframe高度自适应代码"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/19/69d51ec0aeb50324743b250656cd4acd_thumb_189.jpg" alt="jQuery解决iframe高度自适应代码"></a> </div> </div> <div class="gg" data-id="content3"></div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20171116/2766140.html" title="lolAD刺客新符文搭配推荐">lolAD刺客新符文搭配推荐</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/yingxionglianmeng/" target="_blank">英雄联盟</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20171116/2766140.html" title="lolAD刺客新符文搭配推荐"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201711/16/bd0c64bbcf0c4a08cdc15ba757ac2fa3.jpg" alt="lolAD刺客新符文搭配推荐"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="/n/20160219/1604485.html">读取Access数据库表名实例</a></h4> </div> <div class="article-item-thumb"> <a href="/n/20160219/1604485.html" title="读取Access数据库表名实例"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/19/1446313b86f43c05930f7c0bf0289abe_thumb_189.jpg" alt="读取Access数据库表名实例"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="/n/20160219/1604488.html">破除网页鼠标右键禁用的十大绝招</a></h4> </div> <div class="article-item-thumb"> <a href="/n/20160219/1604488.html" title="破除网页鼠标右键禁用的十大绝招"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/19/8d876217486c99b7a68d20eaf4a20744_thumb_189.jpg" alt="破除网页鼠标右键禁用的十大绝招"></a> </div> </div> <div class="gg" data-id="content4"></div> </div> </section> <div class="loadbox"> <div class="load-btn">下拉加载更多内容 ↓</div> <div class="icon-loading"></div> </div> <div class="gg show-banner2" data-id="banner2"></div> <div class="gg show-foot" data-id="foot"></div> </section> <footer id="footer" class="site-footer"> <ul class="footer-nav"> <li><a href="/" title="图老师首页">首页</a></li> <li><a href="/diannao/sitemap/" title="地图">地图</a></li> <li><a href="/update/6/" title="最新">最新</a></li> </ul> </footer> <div id="fixed-box" class="js-insert-box" data-id="fixed"></div> <script src="http://i1.tulaoshi.com/js/mobile.js"></script> <script type="application/ld+json"> { "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld", "@id": "http://m.tulaoshi.com/n/20160219/1604487.html", "appid": "1556758182286999", "title": "解决列高度自适应(列高度相同)的五种方法", "images": [ "http://img.tulaoshi.com/201602/19/e3933a008e71a961f2bef7bb760acc6a_thumb_189.jpg" ], "description": "今天给大家分享的是由图老师小编精心为您推荐的解决列高度自适应(列高度相同)的五种方法，喜欢的朋友可以分享一下，也算是给小编一份支持，大家都不容易啊!", "pubDate": "2016-02-19T13:30:08" } </script></body></html>