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

Макет: стопка блинчиков

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

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

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

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

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

See this code Pancake stack on x.xhtml.ru.