將子元素填充到父元素的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;
}

例