DIV上中下布局高度自适应的研究

DIV上中下布局高度自适应的研究
一、背景
    在采用基于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>