本文轉(zhuǎn)自：http://blog.sina.com.cn/s/blog_4b8d35b70100mfy2.html
一、背景
在采用基于DIV+CSS的布局開發(fā)時，經(jīng)常需要考慮各種瀏覽器版本的兼容性問題。
常用的布局模式主要包括：左中右、上中下，以及兩種模式的結(jié)合。
在早期的開發(fā)，一般都采用Table標記的方式實現(xiàn)。
當嘗試采用基于DIV的模式，發(fā)現(xiàn)一切都變的似乎沒那么簡單了。特別是瀏覽器的兼容性問題，更加突出了。
二、需求
本文只討論上中下布局模式的實現(xiàn)，關(guān)于左中右模式的實現(xiàn)，相比較來說要簡單得多了。如果時間充，我會另文詳述。
1.上部（top）Div高度固定100px，寬度100%；
2.下部（footer）Div高度固定100px，寬度100%；
3.中部（middle）DIV高度根據(jù)屏幕高度，自適應充滿，寬度100%；
4.用純DIV+CSS實現(xiàn)，不采用腳本計算高度的方式；
5.調(diào)整瀏覽器大小時，中部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實現(xiàn)
為了便于理解實現(xiàn)原理，分兩部分說明：
1.IE6下的實現(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下的實現(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>
