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

Question

this question重复。

我有一个现有网站（jacquelinewhite.co.uk），其上有一个页脚。目前，此页脚始终位于主要内容的下方。我试图让它浮动到浏览器窗口的底部，或者如果内容大于窗口，则保留在内容的底部。

有效地，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，它将页脚放在窗口的底部，但如果窗口的内容较大，则页脚会覆盖内容。

我该如何解决这个问题？

Answer 1

这个对我来说总是很好用：CSS Sticky Footer

Answer 2

试驾这......

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

Answer 3

假设你正在使用footer（）元素我发现只是将它添加到CSS为我工作

html, body {
  height: 100%;
}

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

footer {
  margin-top: auto;
}