нижний колонтитул в нижней части страницы или контента, в зависимости от того, что ниже

введение

предоставленная структура HTML включает в себя элемент родительского обертка (#main-wrapper), содержащий заголовок, навигацию, статью и пейпер. Задача состоит в том, чтобы динамически отрегулировать положение нижнего колонтитула на основе высоты содержания в элементе статьи. Нижний нижний колонтитул должен придерживаться нижней части страницы, когда существует достаточное количество содержания, но перемещаться в нижнюю часть окна браузера, когда содержание ограничено.

один надежный и современный подход к решению этой проблемы - путем использования Flexbox. Flexbox предлагает универсальную систему макета, которая упрощает позиционирование и выравнивание элементов в контейнере. Используя способность Flexbox вертикально выравнивать элементы, мы можем достичь желаемого поведения липкого нижнего колонтитула.

]. тело { высота: 100%; поля: 0; Заполнение: 0; } #main-wrapper { дисплей: Flex; Флекс направление: колонка; Мин-высот: 100%; } статья { Flex: 1; }. Элемент статьи имеет Flex: 1, что заставляет его занимать оставшееся пространство, не занимаемое заголовком и навигацией.

. Когда в статье достаточно содержания, он растет, чтобы оттолкнуть нижний колонтитул, позиционируя его в нижней части страницы. Однако, когда контент ограничен, статья сокращается, а нижний колонтитул динамически перемещается в нижнюю часть окна браузера, так как MIN-высота элемента #Main-Wrapper гарантирует, что он всегда заполняет Viewport.