Как сделать полноэкранный div с верхней и нижней липкими навигационными панелями

Question

Хотелось бы иметь следующую раскладку стиля

+-----------------------------------------------------------+
| Top Sticky Nav                                            |
+--------------------------------------------------------+--+
|                                                        |S |
|                                                        |C |
| Div                                                    |R |
|                                                        |O |
|                                                        |L |
|                                                        |L |
+--------------------------------------------------------+--+
| Bottom Sticky Nav                                         |
+-----------------------------------------------------------+

Я хотел бы использовать навигационные панели Bootstrap 4, которые прикреплены к верхней и нижней части страницы. Сэндвич между ними - это div с моим контентом, который будет автоматически показывать полосу прокрутки, если содержание div больше, чем область между двумя Nav. Полоса прокрутки должна отображаться только на элементе div и не должна быть закрыта навигационной панелью.

Мне кажется, что это просто, но каждое решение, которое я пробовал, кажется немного ненадежным при переходе между полноэкранным, частичным экраном и мобильным экраном.

Fyi содержимое div будет в форме Bootstrap4.

У кого-нибудь есть советы или примеры для чего-то подобного?

Я должен также упомянуть, что div нужно перемещать вниз, когда навигационная панель сжимается на мобильном устройстве, а упоминание о гамбургере показывается и открывается.

Спасибо

Answer 1

BS4 макет

<div class="fixed-top">
<!-- navbar or any thing you can add ad top div -->
<nav class="navbar navbar-fixed-top">

</nav>
</div>

<div class="container">
  class container or container-fluid or section ... what ever you want 
</div>

<div class="fixed-bottom">
<!-- navbar or any thing you can add ad bottom div -->
<nav class="navbar navbar-fixed-bottom">

</nav>
</div>

Answer 2

В Bootstrap 4 у вас есть классы позиции , такие как .fixed-top, это установит элемент в верхней части края области просмотра на ребро, а .fixed-bottom сделает то же самое, но в нижней части.

Ваш код должен выглядеть следующим образом:

.red {
  background-color: red;
  height: 40px;
}
.blue {
  background-color: Aqua;
}

.container {
  margin-top: 40px;
  margin-bottom: 40px;
}

<div class="fixed-top red">Fixed top</div>
</div>
<div class="container">
  <div class="row">
    
    <div class="col-12 blue">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a</div>

  </div>
</div>

<div class="fixed-bottom red">Bottom</div>

Как вы можете видеть, я добавил высоту для верхнего фиксированного элемента, потому что нам нужно добавить поле для контейнера с тем же количеством пикселей, что и для верхней высоты, чтобы содержимое не начиналось под верхним элементом, то же самое с нижним элементом, но вместо margin-top мы используем margin-bottom.

Я создал Codepen для вас.