背景不会到达页面底部

Question

我在bg顶部有一个白色的容器,但即使最小高度设置为100%它也会停止,这是该容器的CSS,而在底部我已经包含了当我滚动到底部时会发生什么的图像:容器哪里发布是:黄Bg:

               .home-body {
                background-color:#EAC117;
                height: 100%;

            .home-main-content {
            width:800px;
            min-height: 100%;
            position:absolute;
            overflow:hidden;
            margin-left:56.5%;
            left:-500px;
            top:51px;
            border-left:1px solid black;
            border-right:1px solid black;
            background-color:#fff;
            background-repeat:repeat-y;



            .home-post-echoed-container {
            width:400px;
            position:absolute;
            margin-left:50%;
            left:-200px;
            top:200px;
            overflow:hidden;
            }
            .home-echoed-posts {
            width:600px;
            overflow:hidden;
            left:-98px;
            position:relative;
            background-color:#fff;
            margin-bottom:-5px;
            border-top:1px solid;color:#0a527e;
            border-left:1px solid;color:#0a527e;
            border-right:1px solid;color:#0a527e;
            }
            .home-echoed-posts-post {
            margin:10px;
            color:black;
            }
            .home-echoed-posts-email {
            margin:10px;
            color:black;
            }
            .home-echoed-posts-date {
            margin:10px;
            color:black;
                            }

Answer 1

你做错了.

要集中你应该使用的东西(而不是绝对定位):

.foobar{
   margin: 0 auto;
   width: 800px;
}

至于"为什么评论不扩展容器",没有代码就很难猜测,但有两种合理的可能性:定位或浮动.我无能为力.但是如果它们是浮动的,那么容易使用具有以下css的容器:

.container{
   overflow: hidden;
}

这有点违反直觉,但就像魅力一样.你可以在这里阅读更多相关信息.

更新:也阅读这篇文章.

更新2:

看起来像是worts案例场景.你正在使用定位..为一切.你真的需要学习如何使用花车.

.home-post-echoed-container {
    width: 600px;
    margin: 0 auto;
    padding-top: 200px; // im guessing what top:200px was doing
    overflow:hidden;
}
.home-echoed-posts {
    width:600px;
    float: left;
    background: #fff;
    margin-bottom: -5px;
    border: 1px solid #0a527e;
    border-bottom: 0;
}

像这样的东西.但我真的只是在猜测.