解决列高度自适应(列高度相同)的五种方法-黑马建站宝典(www.heima123.com)

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/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;} </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> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> </div> <h2>sideright</h2> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> </div></div> <div id="footer"> <address> Footer </address> <p>制作：</p> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Equal height(使用JS实现列高度相同的方法)</title> <style 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;*/ } #header{ background: #E8E8E8; } #sideleft{ width: 580px; float: left; background: #FFF; text-align: left; } #sideright{ width: 170px; float: left; background: #F0F0F0; text-align: left; } #footer{ background: #E8E8E8; width: 100%; float: left; } h1,h2,address,p{ margin: 0; padding: .8em; } h1,h2{font-size: 20px;} </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Head</h1> </div> <div id="sideleft"> <h2>sideleft</h2> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> </div> <div id="sideright"> <h2>sideright</h2> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> </div> <script type="text/javascript"> document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px" </script> <div id="footer"> <address> Footer </address> <p>制作：</p> </div> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

3.采用脚本控制列的高度（二）
不需要事先知道哪列的高度，脚本自动判断。

代码较复杂，有点延时：

<!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" xml:lang="en" lang="en"> <head> <title>脚本控制三行三列自适应高度DIV布局</title> <script src="http://www.webjx.com/htmldata/js/eqCols.js" type="text/javascript"></script> <style type="text/css">  </style> </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"></div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

4.采用负的外边界和内补丁相结合
不需要事先知道哪列的高度。

hacks比较多（主要是opera的），但容易使用，推荐：

<!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(DIV+CSS布局中自适应高度的解决方法)</title> <style 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; } #header{ background: #E8E8E8; } #sideleft{ width: 580px; float: left; background: #FFF; text-align: left; } #sideright{ width: 170px; float: left; background: #F0F0F0; text-align: left; } /* easy clearing */ #wrap:after { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; height: 0; clear: both; visibility: hidden; } #wrap { display: inline-block; } /*\*/ #wrap { display: block; } /* end easy clearing */ /*\*/ #sideleft, #sideright { padding-bottom: 32767px !important; margin-bottom: -32767px !important; } @media all and (min-width: 0px) { #sideleft, #sideright { padding-bottom: 0 !important; margin-bottom: 0 !important; } #sideleft:before, #sideright:before { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; background: inherit; padding-top: 32767px !important; margin-bottom: -32767px !important; height: 0; } } /**/ #footer{ background: #E8E8E8; width: 100%; float: left; } h1,h2,address,p{ margin: 0; padding: .8em; } h1,h2{font-size: 20px;} </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Head</h1> </div> <div id="sideleft"> <h2>sideleft</h2> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> </div> <div id="sideright"> <h2>sideright</h2> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> </div> <div id="footer"> <address> Footer </address> <p>制作：</p> </div> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

5.采用负的左右边界和相对定位
下面的例子能较好地解决列高度相同的问题。

三行二列布局，主要内容在左边，网页宽度750px,左列580px,右列170px。

CSS代码：

以下是引用片段：
#middle{
width: 580px;
float:left;
background:#FFFFFF;
text-align:left;
}
#sideleft{
width: 580px;
float: left;
position:relative;
margin-left:-580px;
}
#sideright{
width: 170px;
float: right;
position:relative;
margin: 0 -170px 0 0;
background: #F0F0F0;
}

上一篇：网页制作时用CSS实现自动换行的小技巧
下一篇：手写样式表：CSS语法全攻略(1)