Question

我按照以下方式构建了我的网站：

<body>

   <div class="main">

      <div class="header">
          content
      </div> 

      <div class="section">
         content
      </div>

      <div class="sidebar">
         content
      </div>

      <div class="clearing"></div>

      <div class="footer">
         content
      </div>
   </div>
</body>

和css

.main {
        position:relative;
        width:908px;
        margin-top:0px;
        border:solid 0px;
        margin:0 auto;
    }

.header {

        position:relative;
        height:200px;
        margin: auto;
    }


  div.section {
            float:left;
        position:absolute;
        width: 584px;
        height:500px;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        text-align:left;
        }

  div.sidebar{
        float:right;
        position:relative;
        width: 324px;
        height:500px;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        text-align:left; 
    }

   .clearing {

        clear:both;
    }



   .footer {
    position:relative;
    left:0px;
    top:0px;
    width:908px;
    height:300px;
   }

当我向div部分添加内容时，我遍布页脚。页脚固定在该点，随着内容的添加，页面增长，页脚保持静止。

每次添加内容时我必须做的是增加css文件中的部分高度或侧边栏的高度 - 任何一个都可以工作 - 但我将两个高度（部分和侧边栏）增加到相同价值，因为它似乎是正确的事情。然后，当部分和侧边栏的高度增加时，页脚会被向下推。

但是，如果我将高度赋予我添加到该部分的内容，它对页脚的位置没有任何影响，可能是因为它与部分本身的高度无关。

有没有办法让页脚响应空间，添加的内容会占用空间，只是自动移动，保留在页面底部？

Answer 1

您position:absolute div上设置了.section，只会将其CSS高度值用于占用的空间量，而不管其实际内容如何。删除绝对位置应该可以解决您的问题。（几乎）总是有一种绕绝对定位的方法。在你的例子中，似乎完全没必要。

这是一个有用的CSS定位网站： http://www.barelyfitz.com/screencast/html-training/css/positioning/

希望它有所帮助！

Answer 2

试试这个：

.footer {
position:relative;
left:0;
bottom:0;
width:908px;
height:300px;

}

当输入0时，不需要添加px。

Answer 3

我正在检查CSS代码，并在每个position中发现div。尝试平衡它，因为它会影响其他divs 也试试

.footer{
   clear: both
}

当我添加内容时，如何让我的页脚下降？

3 个答案: