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

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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Equal height(列高度相同的方法)</title> <style type="text/<a href=http://www.jzxue.com/search.asp?page=1&condition=title&keyword=css&Types=News target=_blank class=navlist>css</a>"> 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;} </style> <script 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;i<n;i ) t = el.origCont; el.innerHTML = t; } // ]]> </script> </head> <body> <div id="header"> <h1>Head</h1> <div id="middle"> <div id="sideright"> <div id="sideleft"> <h2>sideleft</h2> <p><a href="javascript:toggleContent('sideleft',1)">默认长度</a>  <a href="javascript:toggleContent('sideleft',2)">加长页面</a></p> <p> 要从固定的、基于像素的<a href=http://www.jzxue.com/search.asp?page=1&condition=title&keyword=设计&Types=News target=_blank class=navlist>设计</a>方法转到弹性的、相对的<a href=http://www.jzxue.com/search.asp?page=1&condition=title&keyword=设计&Types=News target=_blank class=navlist>设计</a>方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出<a href=http://www.jzxue.com/search.asp?page=1&condition=title&keyword=设计&Types=News target=_blank class=navlist>设计</a>上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定<a href=http://www.jzxue.com/search.asp?page=1&condition=title&keyword=设计&Types=News target=_blank class=navlist>设计</a>方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的<a href=http://www.jzxue.com/search.asp?page=1&condition=title&keyword=设计&Types=News target=_blank class=navlist>设计</a>方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> <p> 要从固定的、基于像素的<a href=http://www.jzxue.com/search.asp?page=1&condition=title&keyword=设计&Types=News target=_blank class=navlist>设计</a>方法转到弹性的、相对的<a href=http://www.jzxue.com/search.asp?page=1&condition=title&keyword=设计&Types=News target=_blank class=navlist>设计</a>方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出<a href=http://www.jzxue.com/search.asp?page=1&condition=title&keyword=设计&Types=News target=_blank class=navlist>设计</a>上的牺牲。 </p> </div> <h2>sideright</h2> <p> 要从固定的、基于像素的<a href=http://www.jzxue.com/search.asp?page=1&condition=title&keyword=设计&Types=News target=_blank class=navlist>设计</a>方法转到弹性的、相对的<a href=http://www.jzxue.com/search.asp?page=1&condition=title&keyword=设计&Types=News target=_blank class=navlist>设计</a>方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出<a href=http://www.jzxue.com/search.asp?page=1&condition=title&keyword=设计&Types=News target=_blank class=navlist>设计</a>上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定<a href=http://www.jzxue.com/search.asp?page=1&condition=title&keyword=设计&Types=News target=_blank class=navlist>设计</a>方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的<a href=http://www.jzxue.com/search.asp?page=1&condition=title&keyword=设计&Types=News target=_blank class=navlist>设计</a>方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> </div></div> <div id="footer"> <address> Footer </address> <p>制作：<a href="http://homepage.yesky.com"><a href="http://homepage.yesky.com/" class="bluekey" target="_blank"><a href=http://www.jzxue.com/search.asp?page=1&condition=title&keyword=网页&Types=News target=_blank class=navlist>网页</a></a>陶吧</a></p> </div> </body> </html> <script 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><p><div align="right">本新闻共<font color=red>6</font>页,当前在第<font color=red>1</font>页 <font color="red">1</font> <a href="091102264163386_2.html">2</a> <a href="091102264163386_3.html">3</a> <a href="091102264163386_4.html">4</a> <a href="091102264163386_5.html">5</a> <a href="091102264163386_6.html">6</a> </div></p><div class="t_c"> </div> </div> <div id="gg468" class="t_c"></div> <br/><br/> <div class="t_r info"> <a href="/school/html/"><img src="/ui/2008/i_6.gif" width="15" height="10" alt=""/> 分类:HTML/XHTML</a> <a href="javascript:window.scrollTo(0,0);"><img src="/ui/2008/i_13.gif" width="16" height="16" align="middle" alt=""/> 阅读:<span id="hits">134</span></a> <a href="#comment"><img src="/ui/2008/i_4.gif" width="16" height="16" align="middle" alt="查看/发表评论"/> 评论:<span id="comments">0</span></a> </div> </div> <div class="b_8"> </div> <div class="mb" style="background:#FAFAFA;"> <div><iframe src=" /comment/index.php?keyid=2&itemid=4276&itemurl=http%3A%2F%2Fwww.master8.net%2Fschool%2Fhtml%2Fshow-4276.html&title=%BD%E2%BE%F6%C1%D0%B8%DF%B6%C8%D7%D4%CA%CA%D3%A6%28%C1%D0%B8%DF%B6%C8%CF%E0%CD%AC%29%B5%C4%CE%E5%D6%D6%B7%BD%B7%A8" name="comment" id="comment" style="width:654px;height:0px;" scrolling="no" frameborder="0"></iframe></div> </div><a name="comment"></a> <div class="b_8"> </div> <div class="mb" style="background:#FAFAFA;"> <br/><br/><br/><br/> <div class="c_b"> <center> <input type="button" value="返回列表" class="btnd" onclick="window.location='/school/html/';"/> <input type="button" value="发布主题" class="btnd" onclick="window.location='/school/myitem.php?action=add&catid=13';"/> <input type="button" value="加入收藏" class="btnd" onclick="Fav();"/> <input type="button" value="告诉好友" class="btnd" onclick="Tell();" /> <input type="button" value="关闭窗口" class="btnd" onclick="window.close();"/> <input type="button" value="跳至顶部" class="btnd" onclick="window.scrollTo(0,0);"/> </center> </div> <br/><br/><br/> <div><center title="添加到文摘"><script type="text/javascript" src="/ui/2008/wz.js"></script></center> </div> <br/><br/><br/> <div id="copyright" class="copyright"> </div> <br/><br/><br/> </div> </div> <div class="mn"> </div> <div class="mr"> <div class="mb" style="width:298px;overflow:hidden;">  <center> <form method="get" action="http://www.google.cn/search" target="google_window"> <table bgcolor="#ffffff"> <tr><td nowrap="nowrap" valign="top" align="left"> <table bgcolor="#ffffff"> <tr><td nowrap="nowrap" valign="top" align="left" height="32"> <a href="http://www.google.com/"> <img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></img></a> <label for="sbi" style="display: none">输入您的搜索字词</label> <input type="text" name="q" size="18" maxlength="255" value="" id="sbi"></input> <label for="sbb" style="display: none">提交搜索表单</label> <input type="submit" name="sa" value="搜索" id="sbb" class="btn"></input> <input type="hidden" name="client" value="pub-4033383233178129"></input> <input type="hidden" name="forid" value="1"></input> <input type="hidden" name="prog" value="aff"></input> <input type="hidden" name="channel" value="0403244999"></input> <input type="hidden" name="ie" value="GB2312"></input> <input type="hidden" name="oe" value="GB2312"></input> <input type="hidden" name="hl" value="zh-CN"></input> </td></tr></table> </td></tr><tr><td nowrap="nowrap" valign="top" align="left"> <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </td></tr></table> </form> </center> </div> <div class="b_8"></div> <div class="mb"> <div class="mu"> <ul>  <li><a href="http://www.cnkuai.cn/host.htm" target="_blank" title="虚拟主机,网站空间,ASP空间,空间"><font color="red"><b>虚拟主机</b></font></a> <a href="http://www.cnkuai.cn/domain.htm" target="_blank" title="中文域名,中文域名注册,中文域名申请"><font color="red"><b>中文域名</b></font></a></li> <li><span class="px10">AD:</span> <a href="/service/adv.html"><span class="f_red">全站广告位预定QQ4908220</span></a></li> </ul> </div> </div> <div class="b_8"></div> <table width="100%" cellpadding="0" cellspacing="0"> <tr align="center"> <td height="22" width="70" class="tab_on" id="tab_1"><a href="http://bbs.master8.net/" target="_blank"><strong>论坛精华</strong></a></td> <td class="tab_out"> </td> </tr> </table> <div style="border:#CAD9EA 1px solid;border-top:none;"> <div id="cont_1" class="mu"> <ul> <li><a href="http://bbs.master8.net/?show-8596.html" title="日期:2008-09-03 22:56 浏览:279" target="_blank">国外译文：域名停放全攻略</a></li> <li><a href="http://bbs.master8.net/?show-8581.html" title="日期:2008-09-03 11:40 浏览:274" target="_blank">谷歌推出开源网络浏览器Chrome</a></li> <li><a href="http://bbs.master8.net/?show-8566.html" title="日期:2008-09-02 21:57 浏览:264" target="_blank">网管员安全训练营--让FTP服务器更安全</a></li> <li><a href="http://bbs.master8.net/?show-8440.html" title="日期:2008-08-28 23:08 浏览:387" target="_blank">我的网站用户，你在哪里？</a></li> <li><a href="http://bbs.master8.net/?show-8407.html" title="日期:2008-08-28 11:49 浏览:500" target="_blank">【*经验之谈*】：服务器托管必用的10大工具</a></li> </ul> </div> </div> <div class="b_8"></div> <div class="mb"> <div class="mt"> <span class="f_r"><script type="text/javascript">cMore(1);</script></span> <a href="/manage/" target="_blank"><strong>网站运营</strong></a></div> <div class="mu" id="c_1"><ul><li>[<a href="/manage/it/">IT看台</a>] <a href="/manage/it/show-10791.html" title="By:年华 At:2008-10-09" target="_blank">人民日报：领导如何面对网络时代</a></li> <li>[<a href="/manage/webmaster/">HI! 站长</a>] <a href="/manage/webmaster/show-10790.html" title="By:小资 At:2008-10-08" target="_blank">中国广东核电集团 2009校园招聘启动仪式10月12日将隆重举行</a></li> <li>[<a href="/manage/it/">IT看台</a>] <a href="/manage/it/show-10789.html" title="By:小资 At:2008-09-26" target="_blank">4200万中小企业 10%企业邮局使用率</a></li> <li>[<a href="/manage/it/">IT看台</a>] <a href="/manage/it/show-10788.html" title="By:小资 At:2008-09-19" target="_blank">高端技术行业领跑代理市场前景广阔</a></li> <li>[<a href="/manage/it/">IT看台</a>] <a href="/manage/it/show-10787.html" title="By:年华 At:2008-09-18" target="_blank">BitTorrent第三轮融资获投1700万美元</a></li> <li>[<a href="/manage/it/">IT看台</a>] <a href="/manage/it/show-10786.html" title="By:年华 At:2008-09-18" target="_blank">谷歌CEO：与雅虎合作无需征得政府额外同意</a></li> </ul></div> </div> <div class="b_8"></div> <div class="mb"> <div class="mt"> <span class="f_r"><script type="text/javascript">cMore(2);</script></span> <a href="/school/" target="_blank"><strong>站长学院</strong></a></div> <div class="mu" id="c_2"><ul><li>[<a href="/school/iis/">IIS</a>] <a href="/school/iis/show-10582.html" title="By:年华 At:2008-10-09" target="_blank">服务器轻松架 IIS7.0安装/调试全攻略</a></li> <li>[<a href="/school/photoshop/">PhotoShop</a>] <a href="/school/photoshop/show-10581.html" title="By:年华 At:2008-10-09" target="_blank">Photoshop鲜为人知的75个技巧</a></li> <li>[<a href="/school/software/">软件应用</a>] <a href="/school/software/show-10580.html" title="By:年华 At:2008-10-09" target="_blank">Windows2000/XP系统文件受损的修复方法</a></li> <li>[<a href="/school/mssql/">MSSQL</a>] <a href="/school/mssql/show-10579.html" title="By:年华 At:2008-10-09" target="_blank">浅析SQL Server 2008企业级新特性</a></li> <li>[<a href="/school/software/">软件应用</a>] <a href="/school/software/show-10578.html" title="By:年华 At:2008-10-09" target="_blank">GHOST使用详解</a></li> <li>[<a href="/school/linux/">Linux/BSD</a>] <a href="/school/linux/show-10577.html" title="By:年华 At:2008-10-09" target="_blank">linux系统下设置IP地址并激活方法</a></li> </ul></div> </div> <div class="b_8"></div> <div class="mb"> <div class="mt1"><a href="/mail/" target="_blank"><strong>文章订阅</strong></a></div> <div style="height:85px;"> <form action="/mail/index.php" method="post"> <ul style="margin:0 0 0 13px;"> <li class="li1"> <input type="checkbox" id="ck2" name="cktypeid[2]" checked="checked"/> <a href="/manage/" target="_blank">运营</a> <input type="checkbox" id="ck3" name="cktypeid[3]" checked="checked"/> <a href="/school/" target="_blank">学院</a> [邮件订阅] </li> <li class="li1"><input name="email" type="text" size="25" value="请输入Email地址" onclick="if(this.value=='请输入Email地址') this.value='';" class="inp"/> <input type="submit" name="dosubmit" value="订阅" class="btn" /> <input type="submit" name="dologout" value="退订" class="btn" /> </li> <li class="li1"> <img src="/ui/2008/rss.gif" width="15" height="15" alt="模板RSS订阅"/> <a href="/manage/rss.xml">运营RSS订阅</a> <img src="/ui/2008/rss.gif" width="15" height="15" alt="文摘RSS订阅"/> <a href="/school/rss.xml">学院RSS订阅</a> </li> </ul> </form> </div> </div> </div> <div class="mn"> </div> </div> <div class="dsn" id="g300"> <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div class="dsn" id="g468"> <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <script type="text/javascript"> $('gg300').innerHTML = $('g300').innerHTML; $('gg468').innerHTML = $('g468').innerHTML; </script> <script type="text/javascript" src="/ui/2008/content.js"></script> <script type="text/javascript" src="/school/show_js.php?itemid=4276"></script> <div style="display:none;"> <div id="member_js"><script type="text/javascript" src="http://bbs.master8.net/member.js.php"></script></div> </div> <div class="m"> <div class="b_8"> </div> <div class="footer"><div class="f_r c_p"><img src="/ui/2008/spacer.gif" height="25" width="30" title="报告错误(本页最后更新时间:2008-10-09 11:45:36)" alt="" onclick="window.location='/about/contact.html';"/><img src="/ui/2008/spacer.gif" height="25" width="30" title="告诉好友" alt="" onclick="Tell();"/><img src="/ui/2008/spacer.gif" height="25" width="40" title="返回顶部" alt="" onclick="window.scrollTo(0,0);"/></div><a href="/" target="_blank">站长吧首页</a> | <a href="/service/" target="_blank">建站服务</a> | <a href="http://www.master8.net/service/adv.html" target="_blank">广告服务</a> | <a href="http://www.master8.net/about/contact.html" target="_blank">联系方式</a> | <a href="http://www.master8.net/about/agreement.html" target="_blank">使用协议</a> | <a href="http://www.master8.net/about/copyright.html" target="_blank">版权和隐私</a> | <a href="http://www.master8.net/sitemap/index.html" target="_blank">网站地图</a> | <a href="/member/register.php" target="_blank">新会员注册</a> </div> <div class="c_b"> <div class="foot"><span class="f_r"><select onchange="if(this.value) window.location=this.value;"> <option>--快速通道--</option> <option value="/">网站首页</option> <option value="/member/">会员中心</option> <option value="http://home.master8.net/">会员列表</option> <option value="http://bbs.master8.net/">站长论坛</option> <option value="/manage/">网站运营</option> <option value="/school/">技术学院</option> <option value="/tool/">站长工具</option> <option value="/service/">建站服务</option> </select> </span> ©2005-2008 站长吧 Master8.NET All Rights Reserved 陕ICP备05010609号</div> <div class="foot c_b"><a href="http://www.hosting.czm.cn/" target="_blank" title="九州未来科技，专业的主机提供商">九州未来科技提供服务器支持</a> | <a href="http://www.hosting.czm.cn/" target="_blank" title="网站空间">网站空间</a> | <a href="http://www.hosting.czm.cn/" target="_blank" title="虚拟主机">虚拟主机</a></div> </div> <br/> </div> <script type="text/javascript" src="/ui/2008/foot.js"></script> <script type="text/javascript" src="/task.js.php?channelid=2&catid=13&itemid=4276&page=0"></script> </body> </html>