Question

我在bg的顶部有一个白色的容器，但是即使min-height设置为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;
                            }

This is what happens when end of bg is cleared

Answer 1

你做错了。

要集中你应该使用的东西（而不是绝对定位）：

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

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

.container{
   overflow: hidden;
}

这有点违反直觉，但就像魅力一样。您可以阅读更多相关信息here。

更新：并阅读this article。

更新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;
}

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

Answer 2

html, body 
{
    height:100%;
}

请确保将其包含在CSS脚本的顶部，否则将.home-main-content设置为min-height:100%;将无效，因为对于CSS，如果在其他地方未定义，则100%只是当前div的高度。

如果.home-main-content被另一个div包围，请确保您拥有相同的属性集。

背景不会到达页面底部

2 个答案: