DIV在DIV內保持100％，保持頁腳粘性

Question

目標： 「頁面包裝」（藍色背景）必須擴展整個頁面的高度。

也保留頁腳底部。 頁腳不能重疊側邊欄/內容。

問題： 增加高度：100％的#container導致頁腳重疊時，窗口大小，並增加所造成的標題下頁腳空白

我已經嘗試了幾十種不同的配置，但似乎無法達到我的目標。

http://jsfiddle.net/fZmut/3/

<div id="container">  
    <div id="header">header</div> 
    <div id="page-wrap"> 
     <div id="inside"> 
     <div id="sidebar"> 
      <p>sidebar</p> 
      <p>sidebar</p> 
      <p>sidebar</p> 
      <p>sidebar</p> 
     </div> 
     <div id="flow-content"> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
     </div> 
     </div> 
     <div id="footer">footer</div> 
    </div> 
</div> 

CSS

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    /* height:100%; */ /* causes footer to overlap when window resized, and adds blank space under footer caused by header */ 
    min-height: 100%; 
    position:relative; 
    margin: 0px auto 10px; 
    background-color: black; 
} 
#header{ 
    background-color:green; 
    width:100%; 
    border-bottom: 2px solid black;  
} 
#page-wrap { 
    background: blue; 
    width: 450px; 
    margin: 0px auto 10px; 
    height:100%;  
} 
#page-wrap #inside { 
    margin: 0px 10px 0px 10px; 
    padding-top: 10px; 
    padding-bottom: 20px; 
} 
#sidebar { 
    width: 50px; 
    float: left; 
    padding-left: 0px; 
    padding-top: 0px; 
    background-color: gray; 
} 
#flow-content { 
    background-color: yellow; 
    padding-left: 50px; 
    padding-top: 1px; 
    padding-right: 15px;  
} 
#footer { 
    background: #fff; 
    border: 1px solid black; 
    height: 20px; 
    width: 430px; 
    margin: 0 10px; 

    bottom: 0; 
    position: absolute; 
} 

Answer 1

您可以添加100％的#container並解決你所提到的2個問題：

使頭絕對位置採取的護理額外的高度問題。 （但你將需要額外的填充添加到藍色區域，以適應

也使頁腳顯示一個類似的錶行和照顧重疊問題其父表：

#header{ 
    background-color:green; 
    width:100%; 
    border-bottom: 2px solid black; 

    **position:absolute;** 
} 
#page-wrap { 
    background: blue; 
    width: 450px; 
    margin: 0px auto 10px; 
    height:100%; 

    **display:table; 
    padding-top:20px;** 
} 

#footer { 
    background: #fff; 
    border: 1px solid black; 
    height: 20px; 
    width: 430px; 
    margin: 0 10px; 

    **display:table-row** 
} 

http://jsfiddle.net/fZmut/7/