html - Bootstrap 粘性页脚解决方案有效，除非 div 开始堆叠

Question

使用此处的模板思想:

https://gist.github.com/seyDoggy/e919a429b2459aedf509

<div class="container">
    ...
</div>

<footer class="footer">
    <div class="container">
        ...
    </div>
</footer>

这很好用，除非 div 正在堆叠(响应式)。然后，页脚不再可见。有谁知道一个简单的解决方法吗？

Answer 1

将粘性页脚 css 更改为此

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

HTML:

<footer class="footer">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>

以上代码基于bootstrap