固定头和底，中间部分自适应布局
这个问题08年在蓝色理想论坛就有牛人们讨论过了：http://bbs.blueidea.com/thread-2860887-2-1.html
在此，只是整合一下之前搜集到的资料。在腾讯发布web2.0QQ在线版的时候，我发现其采用的自适应的布局，相信不久之后，大部分的桌面软件搬到WEB上都会采用这样的布局，例如office的在线版本等等。这篇文章：http://bbs.blueidea.com/thread-2818595-1-1.html，比较详细地分析了为什么要采用宽高自适应的布局。
固定头和底，中间部分自适应布局，即中间高度和宽度自适应，这样的布局，其实是比较麻烦的，对于高度自适应，出现的困难主要是体现在IE6上，由此可以演化出两种布局方式：1，JS实现；2，怪异模式。其他方式如expression等对资源消耗过大的方法在此就忽略吧。
实际上，腾讯web2.0QQ在线版在兼容IE6的方法上，就是采用了JS的方式（如果检测没错的话），我个人也比较倾向与这种方式，毕竟并不是所有纯CSS布局都显得优雅。
在非IE6的浏览器下，大部分可以采用绝对定位的left,top等属性来设定宽高的自适应，例如：当一个DIV被设定为绝对定位后，宽高默认为0，这时候如果设定left:20px;right:20px；则这个DIV将根据父DIV的宽度，距离左边20px,右边20px,宽度自动拉长，如下图：
请点击这里查看示例。
同理，如果设置top,bottom等属性的话，高度也会自适应拉伸，但是有个问题，在IE6上不会出现自适应的效果。处理IE6的兼容性问题上，主要有两种方式：
【JS方法】
先判断浏览器是否为IE6,当浏览器是IE6的时候，用JS自动调整需要自适应的宽高。
代码
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>固定头和底，中间部分自适应布局-橡树小屋</title>
<script type="text/javascript">
function id(elem){
return document.getElementById(elem);
}
//确定视口的宽度和高度
function windowHeight(){
var de=document.documentElement;
return (de&&de.clientHeight)||document.body.clientHeight;
}
function resetStyle(){
var clientWidth=document.body.clientWidth;
var clientHeight=windowHeight();
var rightWidth=clientWidth-id("left").offsetWidth-2;
var rightHeight=clientHeight-id("top").offsetHeight-id("footer").offsetHeight;
if(rightWidth<=0) rightWidth=0;
id("right").style.width=rightWidth+"px";
id("right").style.height=rightHeight+"px";
id("left").style.height=rightHeight+"px";
}
window.onload=function(){
var b_v=navigator.appVersion;
var IE6=b_v.search(/MSIE 6/i);
if(IE6!=-1){
resetStyle();
window.onresize=resetStyle;
}
}
</script>
<style type="text/css">
html,body{ margin:0; padding:0;}
#top{ position:absolute; top:0; height:70px; width:100%; background:#CCC}
#left{ position:absolute; width:298px; left:0; top:70px;bottom:35px;border:1px solid #900 }
#right{ position:absolute; top:70px; bottom:35px; left:300px;right:1px;border:1px solid #063}
#footer{ position:absolute; bottom:0; height:35px; width:100%; background:#CCC}
</style>
</head>
<body>
<div id="top"></div>
<div id="left"></div>
<div id="right">当浏览器伸缩的时候，可以自适应</div>
<div id="footer"></div>
</body>
</html>
请点击这里查看示例。
【纯CSS方法】
纯CSS方法是用了怪异模式，在IE6的情况下，在文件头用语句触发怪异模式
“<!-- hi IE,please go to Quirks Mode-->”
通常怪异模式触发的情况：
- 没写DOCTYPE，这个最常见
- 写了DOCTYPE，但是在<!DOCTYPE …>代码之前字符输出
怪异模式是IE6之前的CSS呈现模式，它对盒子模型的解析比较奇怪。在标准模式下，盒子模型是这样的：
在怪异模式下，盒子模型是这样：
width包括了padding和border，所有，当设定height:100%,再设置border-top，border-bottom为相应的值就可以使其自适应了，因为height:100%包括了border的值。
前端设计师 嗷嗷写过相关的例子：http://labs.aoao.org.cn/demo/layout/100x100/。有兴趣的可以查看其代码。
文毕！
参考资料：
