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

　　这个问题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/。有兴趣的可以查看其代码。

      文毕！

 

参考资料：

蓝色理想，嗷嗷的小站

 



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

BY 

橡树小屋

 from  http://www.cnblogs.com/babyzone2004/

本文地址： http://www.cnblogs.com/babyzone2004/archive/2010/10/07/1845052.html

转载于:https://www.cnblogs.com/babyzone2004/archive/2010/10/07/1845052.html