css - 中心列设置为 100% 高度的粘性页脚

Question

我的粘性页脚可以正常工作，但我希望我的测试容器能够从浏览器顶部到达页脚。我怎样才能做到这一点？除了中心列的高度外，它都在工作。

HTML:

<div id="wrap">
  <!--All of your content goes here-->
  <div id="test">test</div>
  <div class="push"></div>
</div>
<div class="pagefooter">footer</div>

CSS:

html, body { width:100%; height:100%; }
#wrap { 
min-height:100%;
height:auto !important;
height:100%;    
margin: 0 auto -158px;  /* Bottom value must = footer height */
}

.pagefooter, .push { width:100%; height:158px; position:relative; bottom:0; }


#test{
    background-color: red;
    height:100%;  
}

Answer 1

试试这个:

#wrap{width:100%;display:table;}
#test{display:table-row;}

并删除 .push div。

Fiddle here.