How to Make a DIV's Height Expand with its Content?

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

This question pertains to the expansion of a DIV's height to accommodate its inner DIVs while maintaining the structure of a container DIV. To achieve this desired behavior, it's essential to implement modifications to the CSS layout.

One approach involves adding a "clear: both;" property before closing the #main_content DIV. This CSS rule instructs the browser to disregard any preceding floating elements, ensuring that #main_content has the entire available width in the container DIV. Additionally, you can move the
element into the #main_content DIV and set its CSS as follows:

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

Alternative Solution Using Flexbox

A more modern alternative is to utilize Flexbox, a CSS3 layout mode that enables flexible and responsive layouts. In this approach, the following CSS rules can be applied:

<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>

HTML structure using Flexbox:

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

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

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

The above Flexbox approach creates a responsive layout where the content section will automatically expand to fill the available vertical space while conforming to the height of its inner elements.

The above is the detailed content of How to Make a DIV's Height Expand with its Content?. For more information, please follow other related articles on the PHP Chinese website!