How to Make a DIV's height Expand with its Content

这个问题涉及扩展 DIV 的高度以容纳其内部 DIV，同时维护容器 DIV 的结构。为了实现这种期望的行为，必须对 CSS 布局进行修改。

一种方法是添加“clear: Both;”关闭 #main_content DIV 之前的属性。此 CSS 规则指示浏览器忽略任何前面的浮动元素，确保 #main_content 具有容器 DIV 中的整个可用宽度。此外，您可以将
元素移动到 #main_content DIV 中，并按如下方式设置其 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;
}

使用 Flexbox 的 HTML 结构：

  

    

     Header   
    
  

  

    Content
  

  

上面的 Flexbox 方法创建了一个响应式布局，其中内容部分将自动扩展以填充可用的垂直空间，同时符合其内部元素的高度。