Guedda
@Guedda
Начинающий front-end разработчик

Как сделать несколько футеров у флексбокса?

Здравствуйте, уважаемые.
Не могу никак придумать, как сделать следующее:
5c1a2819519b2046544983.png
Суть в том, что если контента мало, то футер 1 коричневого блока и футер 2 оранжевого блока прилеплены к низу экрана, но если контента очень много, то чтобы было, как на картинке справа.
Перепробовал множество вариантов, но наиболее близким было
<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 прячется под блок с контентом.
Помогите, пожалуйста. Уже все мысли закончились.

Заранее благодарен за ответы.
  • Вопрос задан
  • 92 просмотра
Решения вопроса 1
Chefranov
@Chefranov
Front-End, Back-End
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы