div+css自适应高度
<html>
<head>
<style type="text/css">
body
{
<wbr>background:#999;<br><wbr>text-align:center;<br><wbr>color:#333;<br><wbr>font-family:Arial, Verdana, Sans-serif;<br> }<br> #header<br> {<br><wbr>width:776px;<br><wbr>margin-left:auto;<br><wbr>margin-right:auto;<br><wbr>padding:0px;<br><wbr>background:#eee;<br><wbr>height:60px;<br><wbr>text-align:center;<br> }<br> #container<br> {<br><wbr>margin-left:auto;<br><wbr>margin-right:auto;<br><wbr>width:776px;<br> }<br></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>#mainbg
{
<wbr>width:776px;<br><wbr>padding: 0px;<br><wbr>background:yellow;<br><wbr>float:left;<br> }<br></wbr></wbr></wbr></wbr>#right
{
<wbr>float:right;<br><wbr>margin:2px 0px 2px 0px;<br><wbr>padding:0px;<br><wbr>width:574px;<br><wbr>background:lightblue;<br><wbr>text-align:left;<br> }</wbr></wbr></wbr></wbr></wbr></wbr>
#left
{
<wbr>float:left;<br><wbr>margin:2px 2px 0px 0px;<br><wbr>padding:0px;<br><wbr></wbr></wbr></wbr></wbr>background:yellow;<wbr><wbr><wbr><wbr><wbr><br></wbr></wbr></wbr></wbr></wbr><wbr>width:200px;<br><wbr>text-align:left;<br> }</wbr></wbr>
#footer
{
<wbr>clear:both;<br><wbr>width:776px;<br><wbr>margin-right:auto;<br><wbr>margin-left:auto;<br><wbr>padding:0px;<br><wbr>background:#eee;<br><wbr>height:60px;<br> }<br> .text<br> {<br><wbr>margin:0px;<br><wbr>padding:20px;<br> }</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr></wbr>
</style>
</head>
<body>
<div id="header">header</div>
<div id="container">
<wbr></wbr><div id="mainbg">
<wbr><wbr><div id="right"><br><wbr><wbr><wbr><div class="text">right<br /><br /><br /><br /><br /><br><wbr><wbr><wbr></div><br><wbr><wbr></div><br><wbr><wbr><div id="left"><br><wbr><wbr><wbr><div class="text">left</div><br><wbr><wbr></div><br><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></div>
</div>
<div id="footer">
<wbr>footer<br> </div><br> </body><br> </html><br></wbr>
看到没有！用一个mainbg把left，right包裹住!再把mainbg的背景设置于left一致！这样别人就看不出来了！
<wbr></wbr>
以下是原作者的注释：
首先我们定义了body和顶部区域#header，这里面关键的是body中的text-align：center；以及header中的margin-left：auto和margin-right：auto；作用是似的header区域在浏览器中居中。注意：在IE中只需要定义body的text-align:center就可以居中了，但是在mozilla（firefox）中必须有margin：auto才可以。
<wbr></wbr>
接下来是left和right区域。为了是这两列也能居中，现在其外部嵌套一层container，并且设置margin：auto，道理和上面一样。这样left和right整体的也居中了。
<wbr></wbr>
你也许奇怪，问什么在container和left、right之间还有一层mainbg，这个层有什么作用呢？这个层是用来定义背景的，那么为什么不直接在container中定义背景呢，而要在多套一层呢？原因还是mozilla（firefox）在作怪（你总不希望自己做的网页在firefox和ie中显示的效果不一样吧），在ie中不需要多嵌套一层，在mozilla中，必须定义高度值才可以显示背景，但是指定高度的话，又无法实现自适应高度的要求，所以多加了一层mainbg，窍门在与mainbg这个层的float：left；这样定义，不指定高度也可以显示背景。
<wbr></wbr>
最后定义的是底部的footer层。该层的关键点在于clear：both；这句话的作用是取消footer层的浮动继承。否则，你会看到footer紧贴这header显示，还是mozilla做得怪:)
<wbr></wbr>
按说到这里就over了,可是细心的朋友会看到left和right分别嵌套了一个层,这两个层都使用了.text{margin:0px;padding:20px}，这又是为什么呢？原因是mozilla和ie对于盒子模型的解释不一样，直接定义margin、padding会造成mozilla和ie中显示的不一致。所以，遇到ie和mozilla不一致的时候，往往多加一层会解决问题。
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>