使子元素填充父元素的 100%，最小高度设置为 100%

Question

我有一个使用粘性页脚的应用程序，但是，我有一个约束要求内容容器跨越其父级的 100%，其中该父级定义了 min-height: 100%。在这个简化的例子中，inner 是内容容器，page-wrap 是父容器。最小高度：粘性页脚需要 100% 才能正常运行。

<div class="page-wrap">
  <div class=inner>
    <h1>.inner</h1>
    <button id="add">Add Content</button>  
  </div>
</div>

<footer class="site-footer">
  <h1>.site-footer</h1>  
</footer>

请以 fiddle 为例。

http://codepen.io/TroutZen/pen/OywGWg

Answer 1

可以试试这个：

.inner {
    width: 100%;
    background-color: green;
    top: 0;
    bottom: 142px;
    position: absolute;
}

Example