如何讓DIV的高度隨內容擴充？

如何使DIV 的高度隨其內容擴展

此問題涉及擴展DIV 的高度以容納其內部DIV，同時維護容器DIV的結構。為了實現這種期望的行為，必須對 CSS 佈局進行修改。

一種方法是新增「clear: Both;」關閉 #main_content DIV 之前的屬性。此 CSS 規則指示瀏覽器忽略任何前面的浮動元素，確保 #main_content 具有容器 DIV 中的整個可用寬度。此外，您可以將
元素加入#main_content DIV 中，並以下列方式設定其CSS：

<code class="css">.clear {
  clear: both;
}</code>

使用Flexbox 的替代解決方案

更現代的替代方案是利用Flexbox（一種CSS3 佈局）模式可實現靈活且響應式的佈局。在這種方法中，可以應用以下CSS 規則：

<code class="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;
}</code>

使用Flexbox 的HTML 結構：

<code class="html"><div class="flex-container">
  <header>
    <h1>
     Header   
    </h1>
  </header>

  <section class="content">
    Content
  </section>

  <footer>
    <h4>
      Footer
    </h4>
  </footer>
</div></code>

上述Flexbox 方法建立一個響應式佈局，其中內容部分將自動擴展填充可用的垂直空間，同時符合其內部元素的高度。

以上是如何讓DIV的高度隨內容擴充？的詳細內容。更多資訊請關注PHP中文網其他相關文章！