html - div main(bootstrap)的高度在折叠前没有覆盖其中的内容

Question

我正在使用 bootstrap v3.0.0 设计网页。并注意到我很难在 main div 之后放入另一个 div 容器。截至目前，我有一个 header div。当屏幕尺寸较小时，header 会将 main 向下推，因此它们永远不会发生冲突。这就是我想要的页面。

但是当试图在 main 之后制作一个 footer 容器时，footer 与我的 main 发生冲突，所以footer 占用了 main 的空间。当屏幕尺寸大到足以让我的内容并排放置时，就会发生这种情况。

当屏幕较小时，footer 会像它应该的那样直接到达页面底部，并且不会与“main”冲突。

---

我的 HTML 是这样的:

<div id="main">
    <div id="content" class="col-md-6">
        <div id="content" class="col-md-6">
           content... </div>
        <div id="content" class="col-md-6">
           content...  </div>
    </div>
</div>

---

主要问题:如何修复 main 元素，以便我可以在下面正确放置一个 footer 而不会在 'main' 之间发生冲突' 和 '页脚'？

Answer 1

为什么不简单地在 header-main-footer <br> 之间的空格中插入中断？或使用此模板中的粘性页脚 sticky footer navbar template bootstrap