Загрузка...В отличие от “разорванного блинчика”, этот пример не переносит дочерние элементы при изменении размера экрана. Этот макет, обычно называемый sticky footer (липкий нижний колонтитул), используется для веб-сайтов (в частности для одностраничных приложений) и мобильных приложений (нижний колонтитул обычно представляет собой панель инструментов).
При добавлении компоненту display: grid получится сетка с одним столбцом, однако основная область будет такой же высоты, как содержимое с нижним колонтитулом под ним.
Чтобы нижний колонтитул прилипал к низу, добавьте:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}Так содержимое верхнего и нижнего колонтитула автоматически принимает размер своих дочерних элементов и применяет оставшееся пространство (1fr) к основной области. Ряд с размером auto будет принимать размер минимального содержимого своих дочерних элементов. Когда это содержимое увеличивается в размере, высота ряда будет корректироваться и увеличиваться.