背景无法到达页面底部 [英] Background wont reach bottom of page

问题描述

我有一个白色的容器在bg的顶部，但它停止即使min-height设置为100％，heres CSS这个容器和底部我已经包含了当我滚动到底部时发生什么：
容器，其中post是：
黄色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; 
} 
  

解决方案

将您应该使用的中心（而不是绝对定位）：

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

至于为什么注释不扩展容器，很难猜测没有代码，但有两种合理的可能性：定位或浮动。有什么我不能做的。但是如果它们是浮动的，那么easies是具有以下css的容器：

  .container {
 overflow：hidden ; 
} 
  

这有点反直觉，您可以阅读更多相关资讯 在这里 。

更新：并阅读 此

更新2 ：

>看起来就像是麦芽酒的情况。你正在使用定位..的一切。 YOu真的需要学习如何使用浮动。

  .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; 
} 
  

但我真的只是猜测。

I have a white container on top of the bg but it stops even though min-height is set as 100%, heres the CSS for this container and in bottom I have included image of what happens when I scroll to the bottom: Container where post is: Yellow 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;
                            }

解决方案

You are doing it wrong.

To center something you should use (instead of absolute positioning):

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

As for "why comments are not expanding the container", it is hard to guess without code, but there are two reasonable possibilities: positioning or floats. There nothing i can do about it. But if they are floated, then easies is to have container with following css:

.container{
   overflow: hidden;
}

It is a bit counter-intuitive, but works like charm. You can read more about it here.

Update: and read this article too.

Update 2:

Looks like it is the worts case scenario. You are using positioning .. for everything. YOu really need to learn how to use floats.

.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;
}

Something like this. But I'm really just guessing.

这篇关于背景无法到达页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！