html - 如何让页脚 div 到页面底部？

Question

我已经尝试了几个小时，现在找不到解决我问题的方法 我已经通过 position:fixed;bottom:0; 使页脚固定在底部底部但是当我的内容更多时，页脚不会相对于内容扩展到底部所以我做了一个容器 div 并将我的页脚放在里面

<div id="container">
<div id="body">
</div>
<div id="footer">
</div>
</div>

#container
{
   position:relative;
}
#footer
{
   position:absolute;
   bottom:0;
   height:30px;
}

到目前为止一切顺利，但是当我尝试将页脚大小(高度)增加到 300PX 时，它占据了我的整个页面，我只希望页脚位于底部且高度相同，我什至尝试制作 #body{ min-height:500px; 但我的页脚仍然没有下降到 300px 的高度。

确切地说，我想要一个像 stackoverflow 这样的页脚，但是当没有内容时，我仍然应该以最小高度坚持到底部。

Answer 1

您好，请点击链接 http://jsfiddle.net/cooolkiran/yVC8r/

 <div class="page-wrap"> Content</div>
<footer class="site-footer">
  I'm the Sticky Footer.
</footer>


    * {
      margin: 0;
    }
    html, body {
      height: 100%;
    }
    .page-wrap {
      min-height: 100%;
      /* equal to footer height */
      margin-bottom: -142px; 
    }
    .page-wrap:after {
      content: "";
      display: block;
    }
    .site-footer, .page-wrap:after {
      /* .push must be the same height as footer */
      height: 142px; 
    }
    .site-footer {
      background: orange;
    }