Question

当我的app-container div扩展时，它会溢出我的页脚。我的页脚应该从app容器（或整个包装器）向下移动，但它没有，我无法找到错误。

HTML代码：

<div class="wrapper">
 <div class="wrapperbackground">
  <div class="app-container">
  </div>
 </div>
</div>

<footer>
 <div class="footerwrapper">
 </div>
</footer>

CSS代码：

.wrapper { text-align:center;  min-height: 900px; }

.wrapperbackground { background-color: #C63D0F; height:375px; padding: 25px 0px; }

.app-container {
    border: 1px dotted;
    padding: 30px;
    margin: 0 auto;
    min-height:300px;
    width:775px;
    background-color:#FDF3E7;
    overflow:hidden;
}

footer {
    height:100%;
    border-top: 1px dashed #FDF3E7;
    background-color:#250800;
    text-align:left;
}

.footerwrapper { border-bottom: 1px dotted #3B3738;padding:50px;min-height:200px; background-color:#220a03; margin: 0 auto; }

如果有人可以帮助我会很好。我同意CSS代码有点混乱，这可能是问题所在。

Answer 1

您需要将.wrapperbackground移至.app-container之前，以便它不再包裹它。然后在'.wrapperbackground'上申请：

position: absolute; top: 0; right: 0; left: 0; height: 200px;

然后在.wrapper申请position: relative;以获得更好的衡量标准和更多的便携性。

查看此更新的小提琴 - http://jsfiddle.net/p57rK/1/

页脚不会向下移动

1 个答案: