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 方法創建了一個響應式佈局，其中內容部分將自動擴展以填充可用的垂直空間，同時符合其內部元素的高度。