Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Два футера друг под другом внизу страницы.

Автор: Guedda 19.12.2018, 15:50

Здравствуйте, уважаемые.
Возникла проблема, которую я не могу решить. Вот картинка, и к ней описание:
user posted image

Посмотрите на левую картинку. Суть в том, что если контента мало, то футер 1 коричневого блока и футер 2 оранжевого блока прилеплены к низу экрана, но если контента очень много, то надо сделать так, как на картинке справа: два футера смещаются вниз.
Максимально к чему я приблизился с помощью bootstrap 4 и flex это:

Код


<div class="h-100 d-flex flex-column align-items-stretch">
  <div class="flex-grow-1 h-75">
    <div class="h-100 d-flex flex-column align-items-stretch">
      <div class="flex-grow-1 h-100">Content</div>
      <div>Footer 2</div>
    </div>
  </div>
  <div>
    Footer 1
  </div>
</div>

Но если конента много, то футер 1 прячется под контентом, а футер два ведет себя нормально.

Пожалуйста, подскажите, как решить данную задачу. Заранее благодарен за ответы.