本文轉(zhuǎn)自：http://blog.sina.com.cn/s/blog_4b8d35b70100mfy2.html

一、背景

    在采用基于DIV+CSS的布局開發(fā)時(shí)，經(jīng)常需要考慮各種瀏覽器版本的兼容性問(wèn)題。

    常用的布局模式主要包括：左中右、上中下，以及兩種模式的結(jié)合。

    在早期的開發(fā)，一般都采用Table標(biāo)記的方式實(shí)現(xiàn)。

    當(dāng)嘗試采用基于DIV的模式，發(fā)現(xiàn)一切都變的似乎沒(méi)那么簡(jiǎn)單了。特別是瀏覽器的兼容性問(wèn)題，更加突出了。

二、需求

    本文只討論上中下布局模式的實(shí)現(xiàn)，關(guān)于左中右模式的實(shí)現(xiàn)，相比較來(lái)說(shuō)要簡(jiǎn)單得多了。如果時(shí)間充，我會(huì)另文詳述。

    1.上部（top）Div高度固定100px，寬度100%；

    2.下部（footer）Div高度固定100px，寬度100%；

    3.中部（middle）DIV高度根據(jù)屏幕高度，自適應(yīng)充滿，寬度100%；

    4.用純DIV+CSS實(shí)現(xiàn)，不采用腳本計(jì)算高度的方式；

    5.調(diào)整瀏覽器大小時(shí)，中部DIV能隨著屏幕高度自適應(yīng)。

三、HTML部分

    本部分非常簡(jiǎn)單，只是定義了三個(gè)DIV，分別對(duì)應(yīng)：top、middle、footer

    <div id="header">
        抬頭</div>
    <div id="middle">
        1頁(yè)中<br />
        2頁(yè)中<br />
        3頁(yè)中<br />
        4頁(yè)中<br />
        5頁(yè)中<br />
        6頁(yè)中<br />
        7頁(yè)中<br />
        8頁(yè)中<br />
        9頁(yè)中<br />
    </div>
    <div id="footer">
        頁(yè)腳

     </div>

四、CSS實(shí)現(xiàn)

    為了便于理解實(shí)現(xiàn)原理，分兩部分說(shuō)明：

    1.IE6下的實(shí)現(xiàn)

<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下的實(shí)現(xiàn)

<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>