Стопка блинов

В отличие от деконструированного pancake , этот пример не переносит дочерние элементы при изменении размера экрана. Этот макет, обычно называемый липким нижним колонтитулом , используется как для веб-сайтов, так и для приложений, в мобильных приложениях (нижний колонтитул обычно представляет собой панель инструментов) и на веб-сайтах, в частности в одностраничных приложениях.

Добавление display: grid к компоненту даст вам сетку из одной колонки, однако основная область будет такой же высоты, как и контент с нижним колонтитулом под ним.

Чтобы нижний колонтитул прилипал к низу, добавьте:

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Это устанавливает, что содержимое верхнего и нижнего колонтитула автоматически принимает размер их дочерних элементов, и применяет оставшееся пространство ( 1fr ) к основной области, в то время как строка auto размером будет принимать размер минимального содержимого своих дочерних элементов, так что это содержимое увеличивается в размерах, сама строка будет расти, чтобы приспособиться.

HTML

<div class="parent">
  <header class="section yellow">Header</header>
  <main class="section blue">Main</main>
  <footer class="section green">Footer Content</footer>
</div>

CSS

        .parent {
  display: grid;
  grid-template-rows: auto 1fr auto;

  /* Just for parent demo size */
  height: 100vh;
}