Как настроить, чтобы элемент контента занимал 100 % высоты тела, за исключением верхнего и нижнего колонтитула фиксированной высоты

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

Структура HTML включает заголовок, элемент управления контентом и нижний колонтитул. В CSS мы начинаем с того, что элементы html и body имеют минимальную высоту 100 % и не содержат полей и отступов.

html, body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

Чтобы позиционировать область контента, мы вводим элемент div #wrapper, который охватывает всю область просмотра с использованием абсолютного позиционирования.

#wrapper {
  padding: 50px 0; /* Adjust to match header and footer heights */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Внутри #wrapper мы определяем элемент div контента (#content) с минимальной высотой 100 %. Это гарантирует, что он заполнит все доступное пространство.

#content {
  min-height: 100%;
}

Чтобы учесть высоту верхнего и нижнего колонтитула, мы используем отрицательные поля для их компенсации.

header {
  margin-top: -50px; /* Adjust to match header height */
  height: 50px;
}

footer {
  margin-bottom: -50px; /* Adjust to match footer height */
  height: 50px;
}

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