css嵌套最小高度布局

Question

我尝试使用嵌套的最小高度 div 和滑动页脚来实现布局。

问题当然是内部最小高度 div 没有扩展到外部 div 的完整高度，因为外部 div 的高度是用最小高度设置的。

这里是html：

<div class="container">
    <section class="pos-container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptates, qui eos dignissimos quae nobis at provident voluptatum dicta nesciunt possimus iusto vitae nihil hic assumenda aspernatur quos vel necessitatibus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptates, qui eos dignissimos quae nobis at provident voluptatum dicta nesciunt possimus iusto vitae nihil hic assumenda aspernatur quos vel necessitatibus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptates, qui eos dignissimos quae nobis at provident voluptatum dicta nesciunt possimus iusto vitae nihil hic assumenda aspernatur quos vel necessitatibus.</p>
    </section>
</div>

<footer>
    i'm footer
</footer>

和css：

body {
background-color: grey;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: scroll; 
}

.container {
    z-index: 1;
    position: relative;
    width: 100%;
    min-height: 100%;
    background-color: pink;
    margin-bottom: 6em;
}

.pos-container {
    position: relative;
    width: 50em;
    min-height: 100%;
    margin: auto; 
    background-color: green;
}

footer {
    z-index: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 6em;    
}

FIDDLE #1 在这个小提琴中，内部 div（绿色）的高度没有扩展到外部 div（粉红色）的高度。

FIDDLE #2 如果我将外部 div 的高度从 min-height 设置为 height 似乎是固定的，但如果内部 div 的高度超过 100%，正如您在FIDDLE #3中看到的那样，还有另一个问题@

这个问题有纯css解决方案吗？

提前致谢！

Answer 1

删除body 的高度或使其成为height:auto; 检查此FIDDLE

CSS 变化

body{
  height:100%; // remove this and add below line
  height:auto; 
}