Решение проблемы размещения раздела с заполнением пространства между верхним и нижним колонтитулом

При переходе от табличного макета к макету на основе div возникает общее препятствие: обеспечение связного и гибкого интервала между Разделы заголовка, содержимого и нижнего колонтитула. Вот надежный подход к использованию Flexbox:

Решение Flexbox

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

Реализация HTML и CSS

Следующий код демонстрирует решение:

  

    ...
  
  

    ...
  
  
  

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

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

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