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

本文转自：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>