固定头和底，中间部分自适应布局

　　这个问题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>