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的高度从最小高度设置为高度似乎是固定的，但如果内部div的高度超过100％则存在另一个问题，如FIDDLE #3中所示

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

提前致谢！

Answer 1

移除body的高度或将其设为height:auto; 选中 FIDDLE

CSS更改

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

css嵌套的最小高度布局

1 个答案: