html - css 嵌套最小高度布局

Question

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

问题当然是内部 min-height div 没有扩展到外部 div 的全高，因为外部 div 的高度是用 min-height 设置的。

这是 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在这个 Fiddle 中，内部 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; 
}