页脚在底部粘，内容包装填充自由空间

Question

我工作的网络布局：

1. 页眉和页脚应全宽，窄的内容，并在底部中心
2. 页脚在屏幕上或在页面的底部，根据内容长度
3. 如果内容没有填满整个屏幕，其包装应填写屏幕反正

前两点没有问题，但现在我只能使用Javascript来拉伸身体。 CSS min-height: 100%不起作用，是否有可能在纯CSS中修复此问题？

这里的a Fiddle包括一个快速和肮脏的jQuery解决方案。

Answer 1

Demo Fiddle

HTML

<div class='table'> 
    <div class='row'> 
     <div class='cell'></div> 
    </div> 
    <div class='row'> 
     <div class='cell'> 
      <section></section> 
     </div> 
    </div> 
    <div class='row'> 
     <div class='cell'></div> 
    </div> 
</div> 

CSS

html, body { 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
} 
.table { 
    display:table; 
    width:100%; 
    height:100%; 
} 
.row { 
    display:table-row; 
    width:100%; 
    height:100%; 
} 
.row:first-child, .row:last-child { 
    height:50px; 
    background:black; 
} 
.cell { 
    display:table-cell; 
} 
.cell:nth-child(2) { 
    text-align:center; 
    height:100%; 
} 
section { 
    width:500px; 
    margin:0 auto; 
    height:100%; 
    min-height:100%; 
    background:grey; 
} 

Answer 2

这是你css.nothing改变......短短编辑..

除去最小高度，而不仅仅是身高，并为部分的ID只是给height:100%

html, body { 
    margin: 0px; 
    padding: 0px; 
    height: 100%; 
} 
#layout-helper-wrapper { 
height: 100%; 
    position: relative; 
    margin: 0px auto; 
    background-color: #eee; 
    overflow: hidden; 
} 

header, footer { 
    background-color: #fb2; 
    margin: 0px; 
    z-index: 2; 
    width: 100%; 
    position: absolute; 
} 
header { 
    height: 30px; 
} 
footer { 
    height: 20px; 
    bottom: 0; 
} 

#body-wrapper { 
    width: 500px; 
    margin: 0px auto; 
    background-color: #fff; 
    position: relative; 
    box-shadow: 0px 0px 8px 3px #aaa; 
    padding: 30px 20px 20px; 
    overflow: hidden; 
    height:100%; 
} 

http://jsfiddle.net/AJ9hr/11/

Answer 3

我用这家伙的方法，使我的页脚坚持底部为不填充视口的网页，但停留在页面的底部（不可见，直到向下滚屏）当内容DOES填充视口时。 工作得很好，没有额外的编辑/黑客。

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/