Bootstrap 4：带有固定顶部导航和固定页脚的仪表板答案

【问题标题】：Boostrap4: Dashboard with fixed Top-Nav and fixed footerBootstrap 4：带有固定顶部导航和固定页脚的仪表板
【发布时间】：2020-06-18 16:14:21
【问题描述】：

我正在寻找带有 bootstrap 4 的仪表板布局。基于https://getbootstrap.com/docs/4.0/examples/dashboard/，仪表板已经可以正常工作了。但结合https://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/ 似乎不起作用。最后布局应该是这样的：

+----------------------------------------------------------------------+
|       Nav (fixed, sticky)                                            |
+----------------------------------------------------------------------+
|            |                                                         |
|            |                                                         |
|  Sidebar   |               Main (scrollable)                         |
|(scrollable)|                                                         |
|            |                                                         |
|            |                                                         |
|            |                                                         |
|            |                                                         |
|            |                                                         |
|            |                                                         |
|            |                                                         |
|            |                                                         |
|            |                                                         |
+----------------------------------------------------------------------+
|       Footer (fixed, sticky)                                         |
+----------------------------------------------------------------------+

这可能吗？有什么例子可以工作吗？非常感谢。

【问题讨论】：

你的意思是你想在你的Bootstrap dashboard 上使用sticky-footer-navbar，对吧？
不，顶部的导航栏和状态消息的页脚。

标签： html css bootstrap-4

【解决方案1】：

在导航栏添加navbar-fixed-top 并在页脚添加：

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #eeeeee;
}

【讨论】：

【解决方案2】：

将Footer 放在</main> 标记之前。

    <footer class="footer" style="text-align: center;">
      <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
      </div>
    </footer>
  </main>

【讨论】：