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

【问题标题】：Making a CSS footer either sit at the bottom of the browser window or bottom of content使 CSS 页脚位于浏览器窗口的底部或内容的底部
【发布时间】：2018-01-31 19:14:03
【问题描述】：

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，它将页脚放在窗口的底部，但是如果窗口的内容更大，那么页脚会覆盖内容。

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

【问题讨论】：

标签： css

【解决方案1】：

这个对我来说一直很有效：CSS Sticky Footer

【讨论】：

很遗憾，该链接现已失效。

【解决方案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;
  }

【讨论】：

谢谢，这不是我想要的，我希望页脚与内容一起流动，而不是总是在窗口底部。

【解决方案3】：

假设您使用的是 footer() 元素，我发现只需将其添加到 CSS 中对我有用

html, body {
  height: 100%;
}

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

footer {
  margin-top: auto;
}

【讨论】：