使CSS页脚位于浏览器窗口的底部或内容的底部

的副本。

我有一个现有的站点（），上面有一个页脚。当前，此页脚始终位于主内容下方。我试图使它浮动到浏览器窗口的底部，或者如果内容比窗口大，则保持在内容的底部

实际上，HTML的结构如下所示：

<div id="container">
  <div id="top_bar">
  </div>
<div id="header">
</div>
<div id="left_menu">
</div>
<div id="right_content">
</div>
<div class="clear">
</div>
<!-- FOOTER AREA -->
<div id="footer">
</div>
<!-- END FOOTER AREA -->
</div>

我尝试过绝对位置，底部0，它将页脚放在窗口的底部，但是如果窗口的内容较大，则页脚会覆盖内容

---

我该如何解决这个问题呢？

这一个对我来说一直很好：

试驾这个

  body {
    margin:0;
    padding:0;
    z-index:0;
  }

  #toolbar {
    background:#ddd;
    border-top:solid 1px #666;
    bottom:0;
    height:15px;
    padding:5px;
    position:fixed;
    width:100%;
    z-index:1000;
  }

---

假设您使用的是footer（）元素，我发现将其添加到CSS对我来说很有效

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

---

谢谢，这不是我想要的，我希望页脚与内容一起流动，而不是总是在窗口底部的网站。遗憾的是，链接现在已经死了。