CSS：非離散最小高度與母公司相關，但也可以擴展父母

Question

我之前試過問過這個問題，但通過迴應評論和評論，我沒有把我的問題弄清楚。所以我會再來一次。用圖片和東西。

我有一個簡單的頁面，包含4個主要元素：頁眉，頁腳和中間，都包含在一個包裝中。包裝應至少爲屏幕高度的100％。頁腳粘性 - 永久卡在包裝紙的底部。標題始終處於相同的位置。

棘手的部分是中間;我希望它始終跨越頁眉和頁腳之間的整個空間，但是，如果需要，還可以推動包裝擴展到最小高度以上。

這裏是我的問題的說明：

和jsfiddle。

我能想到的唯一方法是使用css calc方法，但它太不可靠了。任何人都可以提出一個更好的方法來實現這個請。

編輯：

在插圖中示出的綠色是中間DIV，不顯示通過所述包裝。即。我特別需要中間div來始終跨越頁眉和頁腳之間的完整空隙。

Answer 1

基於http://ryanfait.com/sticky-footer/，你可以使用

HTML：

<div id="wrapper"> 
    <div id="header"> 
     Header 
    </div> 
    <div id="middle"> 
     Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle 
    </div> 
    <div id="push"></div> 
</div> 
<div id="footer"> 
    Footer 
</div> 

CSS：

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
#wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -4em; 
} 
#footer, #push { 
    height: 4em; 
} 

Demo

如果你不希望有一個語義上不正確#push元素，你可以使用:after（請參閱http://css-tricks.com/snippets/css/sticky-footer/），但不適用於舊版瀏覽器。

---

如果你真的需要中間div來填滿所有的空間，你可以使用浮動元素：

HTML：

<div id="header"> 
    Header 
</div> 
<div id="middle"> 
    Middle begin<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle end 
    <div id="push"></div> 
</div> 
<div id="footer"> 
    Footer 
</div> 

CSS

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
#header { 
    float: left; 
    width: 100%; 
} 
#middle { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -4em; 
} 
#footer, #push { 
    height: 4em; 
    clear: both; 
} 

演示 ：http://jsfiddle.net/C43ZJ/2/

注意它不IE7工作，因爲min-height: 100%觸發hasLayout，然後#middle清除浮動#header（見How to stop IE7 clearing floats because of hasLayout）。