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/