css經典佈局——頭尾固定高度中間高度自適應佈局

時間 2019-11-11

標籤 css 經典佈局頭尾固定高度中間自適應欄目 CSS 简体版

原文原文鏈接

今天說說一個經典佈局：頭尾固定高度中間高度自適應佈局！

轉文請標明 --- 出處：穆乙 http://www.cnblogs.com/pigtail/css

相信作事後臺管理界面的同窗，都很是清楚這個佈局。最直觀的方式是框架這個我不想多寫費話，由於咱們的重心不在這裏。若是有不瞭解的同窗能夠百度、google。這裏我不得不吐下槽！！html

百度實在讓我這個「粉絲」失望。就目前狀況來講，百度已經徹底輪爲「有錢人排行榜」！不再顧及用戶的搜索需求了，由於主導地位實在是：不可撼動！前端

不相信的同窗，能夠親身對比下B vs G的搜索結果。別告訴我google如何強大！！css3

好久之前，百度的搜索結果更符合目標，由於他更瞭解中國人的習慣，這是不可爭議，如今狀況已經徹底相反！git

雖然google常常是六脈神劍，但我更欣賞它的搜索結果。吐槽打住!!!github

如今開始正式談論這個經典佈局 —— 頭尾固定高度中間高度自適應佈局web

下面說下要求：chrome

1 頭部固定高度，寬度100%自適應父容器；瀏覽器

2 底部固定高度，寬度100%自適應父容器；框架

3 中間是主體部分，自動填滿，瀏覽器可視區域剩餘部分，內容超出則中間部分出現流動條；

4 整個內容填滿瀏覽器可視區域，而且不超出此區域！

先看下效果圖：

相信，作過兩年前端的同窗，拿到這個需求，都有一個感受——這挺簡單的！

是的，原本就挺簡單！

方法一：position:absolute定位，不設高，並改變"包含塊"的尺寸渲染

從我腦海崩出來的第一個念頭就是定位佈局——position

而我也是這麼作的，由於要固定頭尾，因此，至少頭和尾要用到position定位。由於瀏覽器大小是能夠調節的，並且不一樣尺寸，不一樣分辨率的瀏覽器可視區域的高度是不固定的，

這就決定是中間主體部分的高度不固定。因此真正的問題核心也正在此。解決了這個問題，整個佈局也就解決了一多半。

上代碼，相信這也是符合大部分思路的實現方式：

按 Ctrl+C 複製代碼

結果也如上圖所示，預期已經達到。經測試：IE7+、firefox、chrome、safari、opera均經過測試！

這裏有點要特別說明的地方：當容器被position:absolute或者float:left or right的時候，在沒有設定寬度的狀況下窗口的表現爲緊貼內容；

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>無標題文檔</title>
<style>
*{padding:0;margin:0}
</style>
</head>

<body>
<div style="height:200px;position:absolute; background:#FF9900;">內容測試</div>
</body>
</html>

看下效果圖：

可是若是在position:absolute下，同時設定left和right或者同時設定top和bottom的話。寬度和高會被拉伸到指定位置，須要說明的這就是寬度或者高度缺省時position:absolute or fixed 狀況下，瀏覽器對容器的尺寸解析方式。

須要說明的是，對於一個浮動元素，若是不設定寬度，一樣採用「包含塊」的渲染方式，寬度取決於內容的寬度。可是，若是這個浮動元素內部有一個右浮動的子元素，寬度會擴展到父容器的寬度。這個就不給出具體的例子了，本身能夠下去測試。另外能夠表現爲「包含塊的」還有display:inline-block 固然，IE 若是display inline 若是 has a layout 一樣會表現出「包含塊」渲染。這裏就不深刻探討了。

下面對於position:absolute or fixed 定位的「包含塊」，作一個渲染測試。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>無標題文檔</title>
<style>
*{padding:0;margin:0}
</style>
</head>

<body>
<div style="height:200px;position:absolute; background:#FF9900;left:0;right:0">內容測試</div>
</body>
</html>

下面效果圖：

但這裏我要鄭重宣佈：IE6除外！經測試：經測試：IE7+、firefox、chrome、safari、opera均聽從此解析模式！IE怪異模式下是不聽從這個原則的。

若是不許備兼容IE6，相信已經能夠到此爲止了，我不想批評IE6。由於它在整個瀏覽發展歷程中是個表明，也是個經典。沒有一款瀏覽能在如此長的時間在市場上佔據如此高的地位。

這固然也得益於它的與xp捆綁推廣策略。可是，就近年web的發展趨勢來看，IE6已經成爲一個負擔。就連微軟也力不從心。

好了關於IE6我不想多談什麼。由於就目前國內的形式而言，徹底放棄IE6只是一個美好的指望。

咱們看下IE6下的效果：

顯然中高的高度超出了預期。顯然，不該該出現滾動條。須要body或者html overflow:hidden。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>頭尾固定中間高度自適應佈局</title>
<style>
html, body {
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden
}
#dHead {
    height:100px;
    line-height:100px;
    background:#690;
    width:100%;
    position:absolute;
    z-index:5;
    top:0;
    text-align:center;
}
#dBody {
    background:#FC0;
    width:100%;
    overflow:auto;
    top:100px;
    position:absolute;
    z-index:10;
    bottom:100px;
    _height:100%
}
.mycontent {
    padding:20px;
}
#dFoot {
    height:100px;
    line-height:100px;
    background:#690;
    width:100%;
    position:absolute;
    z-index:200;
    bottom:0;
    text-align:center;
}
</style>
</head>

<body>
<div id="dHead">固定頭部100px;</div>
<div id="dBody">
  <div class="mycontent"> 中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
  </div>
</div>
<div id="dFoot">固定尾部100px</div>
</body>
</html>

看下面效果圖：

看右下角顯然主體部分被擋住了，並沒達到咱們想要的預期！結合兩種IE6下的效果表現。其實，能夠歸結爲height:100%形成的。也能夠歸結於w3c的盒子模型；

這裏簡單的介紹一下IE與W3C兩種不一樣中的盒子模型：

先看一下面兩種盒子的解析圖：

從上圖能夠看到 IE 盒子模型的範圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不一樣的是：IE 盒子模型的 content 部分包含了 border 和 pading。

IE的盒子模型後來修復掉了，在標準模式下是表現w3c盒子模型的，在quirks模式下表現本身的盒子模型。

若是在IE6盒子模型下，設定BODY的padding哪麼剩餘的高度被主體部分繼承，就符合咱們的預期了；

（固然css3中有box-sizing能夠改變盒子的模型，從這方面看IE6的盒子模型，是符合邏輯的。連w3c都作了兼容吸取）

那如今就是怎麼觸發IE6的quirks的問題了。

這裏我只說幾種常見的方法,其它方法，讀者自已搜索：

一、去除掉DOCTYPE聲明，顯然這不是咱們想看到的結果；

二、DOCTYPE 以前有一個 XML 聲明：<?xml version="1.0" encoding="GBK"?>，這只是針對IE6的方式；

三、若是 DOCTYPE 以前有任何語句，quirks 模式在任何版本的 IE 中（截至 IE 9）一樣會被觸發，例如：

<!-- This comment will put IE 6, 7, 8, and 9 in quirks mode -->加一個註釋

我這裏採用了第二種方式，其實第三種方式更合理些，由於咱們不想觸發quirks模式，形成瀏覽的不一致。但如今咱們只須要在IE6下觸發quirks模式，因此採用了第二種方法。

<?xml version="1.0" encoding="GBK"?>
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>頭尾固定中間高度自適應佈局</title>
<style>
html,body{height:100%;}
body {
    margin:0;
    overflow:hidden;
    _padding:100px 0;
}
#dHead {
    height:100px;
    line-height:100px;
    background:#690;
    width:100%;
    position:absolute;
    z-index:5;
    top:0;
    text-align:center;
}
#dBody {
    background:#FC0;
    width:100%;
    position:absolute;
    z-index:100;
    top:100px;
    bottom:100px;
    overflow:auto;
    _position:relative;
    _top:0;
    _bottom:0;
    _height:100%;
    _overflow:auto
}
.mycontent {
    padding:20px;
}
#dFoot {
    height:100px;
    line-height:100px;
    background:#690;
    width:100%;
    position:absolute;
    z-index:200;
    bottom:0;
    text-align:center;
}
</style>
</head>

<body>
<div id="dHead">固定頭部100px;</div>
<div id="dBody">
  <div class="mycontent"> 中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分-----------------------------------<br>
  </div>
</div>
<div id="dFoot">固定尾部100px</div>
</body>
</html>

經測試達到預期！這樣咱們想要的結果都有了。固然若是，不設定body的padding設dBody的上下border也是同樣的，這個留給讀者本身下去本身測試吧。這裏就不貼Demo了。

缺點：爲ie6作了太多的bug處理，同時還觸發了IE6的怪異模式，使得盒子解析模式跟W3C不符，這樣會影其它版塊的盒子書寫。

方法二：利用boxsizing改變盒子模型

其實，第二種方法跟第一種方法，有部分重疊。其中「滋味」，讀者本身體會吧！萬變不離其宗。

其實這個方法是藍色理想上看到的一辦法。

實現原理是，先爲html設定box-sizing而後，加上上下padding值。佈局模塊均採用position:relative定位。

而後，頭部採用負向margin向上平移（由於有了html padding），如查採用負top的話須要爲每一個佈局版加上負top;看實現代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href="http://www.14px.com" title="Home" />
<title>利用box-sizing實現div仿框架</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}
html {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:100px 0;
    overflow:hidden;
}
html, body {
    height:100%;
}
.top {
    position:relative;
    top:-100px;
    height:100px;
    background:#f60;
}
.side {
    top:-100px;
    position:relative;
    height:100%;
    background:#fc0;
    overflow:auto;
    width:200px;
    float:left;
    margin-right:0 !important;
    margin-right:-3px;
    overflow:auto;
}
.main {
    top:-100px;
    position:relative;
    overflow:auto;
    height:100%;
    background:#f30;
}
.bottom {
    top:-100px;
    position:relative;
    height:100px;
    background:#f60;
    clear:both;
}
</style>
</head>
<body>
<div class="top"> top </div>
<div class="side"> side <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
</div>
<div class="main"> main <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
</div>
<div class="bottom"> bottom </div>
</body>
</html>

瞭解box-sizing的同窗們應該知道，它來自離微國比較遙遠的css3世界，所以IE6/IE7是不支持的，但通過驗證正常兼容IE6/IE7。

IE6/IE7下，<html>的box-sizing默認值本就是border-box（注：IE7有一點點不正常，overflow:hidden後神志有所恢復）。

這種方法看起更加完美，由於它不用觸發ie6的怪異模式，不會影響總體佈局。

另外若是給頭部是absolute定位的話也是能夠實現的。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href="http://www.14px.com" title="Home" />
<title>利用box-sizing實現div仿框架</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}
html {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:100px 0;
    overflow:hidden;
}
html, body {
    height:100%;
}
.top {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100px;
    background:#f60;
}
.side {
    height:100%;
    background:#fc0;
    width:200px;
    float:left;
    margin-right:0 !important;
    margin-right:-3px;
    overflow:auto;
}
.main {
    overflow:auto;
    height:100%;
    background:#f30;
}
.bottom {
    position:relative;
    height:100px;
    background:#f60;
    clear:both;
}
</style>
</head>
<body>
<div class="top"> top </div>
<div class="side"> side <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
</div>
<div class="main"> main <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
</div>
<div class="bottom"> bottom </div>
</body>
</html>

方法三：這個方法實際上是從方法一和方法二結合實現的

其它瀏覽器依然採用position定位，不設高度，而後，觸發「包含塊」的尺寸。

IE6下，採用html的box-sizing默認爲box-border來實現。具體的原理上面都已經講過了直接上代碼：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>頭尾固定的自適應內容佈局</title>
<style type="text/css">
<!--
* {
    margin:0;
    padding:0;
}
html{
    _padding:100px 0 100px 0;
    _overflow:hidden;
}
html,body {
    height:100%;
    width:100%;
}

.wrap {
    background:#FF8C00;
    width:100%;
    overflow:auto;
    position:absolute;
    z-index:20;
    left:0;
    top:100px;
    bottom:100px;
    _height:100%;
}
.top {
    height:100px;
    width:100%;
    left:0;
    top:0px;
    background:#6B8E23;
    position: absolute;
    z-index:100
}
.footer {
    height:100px;
    width:100%;
    background: #EE4063;
    position: absolute;
    bottom:0;
    left:0;
    z-index:100
}

-->
</style>
</head>
<body>
<div class="top">固定頭部100px;</div>
<div class="wrap">
中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分<br>
    中間自適應部分-----------------------------------<br>
</div>
<div class="footer">固定尾部100px</div>
</body>
</html>

這裏就不重複發效果圖了，有興趣的能夠測試一下demo。

優勢：不用觸發怪異模式

缺點：爲IE6加了hack

方法四: 設置,主體部分的box-sizing

思路一旦打開,解決問題的辦法也就多起來了。既然有box-sizing這個好東西能夠利用。那麼不如設置主體部分的box-sizing:border-box；而後爲主體部分加上上下border，看起來問題一樣能夠解決。事實也是如此！

看實現代碼：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>頭尾固定的自適應內容佈局</title>
<style type="text/css">
<!--
* { margin:0; padding:0; }
html, body { height:100%; width:100%; overflow:hidden }
.wrap { background:#FF8C00; width:100%; overflow-y:scroll; height:100%; position:absolute; top:0; z-index:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; border-top:100px solid #fff; border-bottom:100px solid #fff; }
.top { height:100px; width:100%; background:#6B8E23; position:absolute; top:0; left:0; z-index:100; }
.footer { height:100px; width:100%; background: #EE4063; position: absolute; bottom:0; left:0; z-index:100 }
-->
</style>
</head>
<body>
<div class="top">
    固定頭部100px;
</div>
<div class="wrap">
    中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分-----------------------------------<br>
</div>
<div class="footer">
    固定尾部100px
</div>
</body>
</html>

經測試，確實能夠。問題在於IE 6/7這兩個不支持box-sizing。

但有解決辦法，這裏說兩個經常使用的辦法：

1 依然是觸發IE的怪異模式，採用上面說的第三種辦法，由於要兼容IE 6/7兩個條件：；

2 採用boxsizing.htc的方式，讓IE 6/7支持box-sizing。至於選哪一個，這是見仁見智的事情了。這裏附下：下載地址 https://github.com/Schepp/box-sizing-polyfill

這裏我就不發，具體代碼了，本身去測試一下吧。

方法五：js來設置中間的高度

對於這種辦法，我就很少說了，相信大部同窗都是能夠很輕鬆的搞定的！

至於採用哪一種模式，本身選擇吧