本文转自：http://blog.sina.com.cn/s/blog_4b8d35b70100mfy2.html
一、背景
在采用基于DIV+CSS的布局开发时，经常需要考虑各种浏览器版本的兼容性问题。
常用的布局模式主要包括：左中右、上中下，以及两种模式的结合。
在早期的开发，一般都采用Table标记的方式实现。
当尝试采用基于DIV的模式，发现一切都变的似乎没那么简单了。特别是浏览器的兼容性问题，更加突出了。
二、需求
本文只讨论上中下布局模式的实现，关于左中右模式的实现，相比较来说要简单得多了。如果时间充，我会另文详述。
1.上部（top）Div高度固定100px，宽度100%；
2.下部（footer）Div高度固定100px，宽度100%；
3.中部（middle）DIV高度根据屏幕高度，自适应充满，宽度100%；
4.用纯DIV+CSS实现，不采用脚本计算高度的方式；
5.调整浏览器大小时，中部DIV能随着屏幕高度自适应。
三、HTML部分
本部分非常简单，只是定义了三个DIV，分别对应：top、middle、footer
<div id="header">
抬头</div>
<div id="middle">
1页中<br />
2页中<br />
3页中<br />
4页中<br />
5页中<br />
6页中<br />
7页中<br />
8页中<br />
9页中<br />
</div>
<div id="footer">
页脚
</div>
四、CSS实现
为了便于理解实现原理，分两部分说明：
1.IE6下的实现
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
padding:100px 0;
width:100%;
height:100%;
overflow:hidden;
}
#header{
position:absolute;
top:0;
width:100%;
height:100px;
background:#ccc;
line-height:100px;
text-align:center;
}
#middle{
position: relative;
top:-100px;
height:100%;
bottom:100px;
width:100%;
background:#ffc;
text-align:center;
overflow: auto;
}
#footer{
position:absolute;
bottom:0;
width:100%;
height:100px;
background:#ccc;
line-height:100px;
text-align:center;
}
</style>
2.IE7、IE8下的实现
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
overflow:hidden;
}
#header{
position:absolute;
top:0;
width:100%;
height:100px;
background:#ccc;
}
#middle{
position: absolute;
top:100px;
height:auto;
bottom:100px;
width:100%;
background:#ffc;
text-align:center;
overflow: auto;
}
#footer{
position:absolute;
bottom:0;
width:100%;
height:100px;
background:#ccc;
line-height:100px;
text-align:center;
}
</style>
五、全部CSS代码
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
padding:0 !important;
padding:100px 0;
width:100%;
height:100%;
overflow:hidden;
}
#header{
position:absolute;
top:0;
width:100%;
height:100px;
background:#ccc;
line-height:100px;
text-align:center;
}
#middle{
position: absolute!important;
top:100px!important;
height:auto!important;
position: relative;
top:-100px;
height:100%;
bottom:100px;
width:100%;
background:#ffc;
text-align:center;
overflow: auto;
}
#footer{
position:absolute;
bottom:0;
width:100%;
height:100px;
background:#ccc;
line-height:100px;
text-align:center;
}
</style>
