Как увеличить высоту DIV вместе с его содержимым

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

Один из подходов включает добавление «clear: Both;» перед закрытием #main_content DIV. Это правило CSS предписывает браузеру игнорировать любые предыдущие плавающие элементы, гарантируя, что #main_content будет иметь всю доступную ширину в контейнере DIV. Кроме того, вы можете переместить элемент
в DIV #main_content и настроить его CSS следующим образом:

.clear {
  clear: both;
}

Альтернативное решение с использованием Flexbox

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

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}

HTML-структура с использованием Flexbox:

  

     Header   
    
  

    Content
  

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