Boostrap4: Панель инструментов с фиксированной верхней навигацией и фиксированным нижним колонтитулом

Question

Мне нужен макет приборной панели с 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)                                         |
+----------------------------------------------------------------------+

Возможно ли это? Есть ли какой-нибудь пример, как это могло бы работать? Большое спасибо.

Answer 1

Поместите 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>

Answer 2

В навигационную панель добавить 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;
}