2

我的网站结构是这样的：

<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 文件中增加部分的高度或侧边栏的高度 - 任何一个都可以 - 但我将两个高度（部分和侧边栏）增加到相同的值，因为这似乎是正确的做法。然后随着部分的高度和侧边栏的增长，页脚被向下推。

但是，如果我将高度归因于我添加到该部分的内容，它不会对页脚的位置产生任何影响，可能是因为它与部分本身的高度无关。

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

4

3 回答 3

1

你已经position:absolute设置了你的.sectiondiv，它只会使用它的 CSS 高度值来表示它占用的空间量，而不管它的实际内容是什么。删除该绝对位置应该可以解决您的问题。（几乎）总有一种方法可以解决绝对定位问题。在您的示例中，这似乎完全没有必要。

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

希望能帮助到你！

于 2013-05-08T17:35:49.063 回答
0

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

.footer{
   clear: both
}
于 2013-05-08T18:33:47.637 回答
0

尝试这个：

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

}

另外在放0的时候，也不需要加上px。

于 2013-05-08T17:36:19.583 回答