粘性而不是固定页脚

Question

我有一个全宽#body-container和一个固定宽度.bg-container。两者都是可用高度的最小值100％。

所以我的页脚再次在那之上 - 此刻。但我希望它在#body-container之后。

所以我的问题是：我如何调整设置以使页脚变粘？

As pen

html,
body {
  height: 100%;
  margin:0;
  padding:0;
}

#body-container {
  height: 100%;
  min-height: 100%;
  overflow:auto;
  background-color: red;
}

.bg-container {
  width: 920px;
  margin: 0 auto;
  background-color: blue;
  min-height: 100%;
}

.pseudo-content{
  background: yellow;
  height: 1000px;
}

footer{
  background: green;
  height: 50px; 
}

<div id="body-container">
  
  <div class="bg-container">
    <div class="pseudo-content">content</div>
  </div>
  
</div>


<footer>
  footer
</footer>

Answer 1

那么，您需要始终显示您的页脚吗？

然后，只需将以下样式添加到footer：

position: fixed;
bottom: 0;
width: 100%;

达成：

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: green;
    height: 50px; 

}