以图说话：
这种布局，我以前想了很久，总是没有办法，采用这种布局的网站，典型就是：博客园、各种邮箱。但是，这种布局的实现方法很多，我看了163邮箱、QQ邮箱的DOM结构，发现，都是用table布局的，用一个table作为两列的容器，然后，使这个table的样式中设置：100%。这是关键，这样table就会占居整个水平方向，而后一列一个td，让一个td固定宽，则另一个td自动占满剩余宽度。这个办法我很久前就想到了。但是，我一直在想有没有用纯div+css的方式来完成这种布局。
今天心血来潮，用FireDebug查看了博客园的DOM结构。恍然大悟。实在太简单了。所以做了个实验，如上图，它对应的代码如下：
<!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"> <head><title> </title> <style type="text/css"> html,body { margin:0; padding:0; } .top { background-color:red; border:solid 1px black; margin:0 0 5px 0; height:50px; } .sidebar { position:absolute; left:0; top:57px; width:205px; background-color:yellow; border:solid 1px black; border-left-width:0; height:50px; } .main { margin-left:210px; background-color:white; border:solid 1px black; height:50px; } </style> </head> <body> <form method="post" action="Default.aspx" id="form1"> <div class="aspNetHidden"> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZITNqJgs+RNs/eWQN1lAbSvpYZlMxqK029mQ2FXE73uH" /> </div> <div class="top">A(固定高度，宽度自适应)</div> <div class="sidebar">B(高度任意，宽度为固定)</div> <div class="main">C(高度任意，宽度为除开B之外的所有空间，自适应)</div> </form> </body> </html>
原理超简单，关键就是上面红色加粗部分，真是巧妙啊。以前怎么没想到这个办法呢？呵呵。
现在看来，适当地用一用absolute，还是可以起到意想不到的效果啊。
上面的代码事实上有改进的余地，如果要求B、C两列上端是平齐的，那么，可以在B、C外面再加一个div，这样，就不用计算B的top了。只填个0就是了。当然，这个容器div的position必须为：relative。另外，可能有的读者认为。为什么不用浮动的方式来实现，只需把B/C放入一个div，让它们两个都向左浮动，然后B定宽，则C因为是块盒子，自然会填充剩余的空间。很遗憾，这个想法太理想化了，事实上并非如此，因为浮动的原因，实际上C的宽度将会是0。另外，浮动在不同的浏览器上的效果不同。不大方便啊。
老实说，网上众多站点采用这种布局的不多，这种布局往往给人一种朴素大方的感觉。时代不同了，以前那种总是占居中间一部分的布局未必能适合所有情况了。