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.

Answer 2

使用html5，flex可能会有所帮助。

#wrap { 
   ...
  display: flex;
  flex-direction: column;
}

   #test{
    ...
    flex: 1;
}

http://jsfiddle.net/qz34C/

粘性页脚，中心栏设置为100％高度

2 个答案: