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

Question

我有一个应用程序使用粘性页脚，但是，我有一个约束，需要一个内容容器跨越其父母的100％有一个最小高度：100％定义。在这个简化的示例中，inner是内容容器，并且换页是父级。最小高度：粘性页脚需要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