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

Question

我有一个使用粘性页脚的应用程序，但是，我有一个约束，要求内容容器跨越其父级的100％，其父级具有最小高度：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>

请参阅小提琴，例如。

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

Answer 1

可以尝试使用它：

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

Example