Comment agrandir un conteneur DIV imbriqué pour accueillir ses enfants ?

Expansion de la hauteur dans les DIV imbriqués pour l'hébergement du contenu de la page

Lorsque vous travaillez avec des structures DIV imbriquées, il est courant de rencontrer le défi de garantir que le conteneur principal se redimensionne dynamiquement pour accueillir ses DIV enfants. Dans ce scénario spécifique, l'objectif est que la DIV #main_content augmente sa hauteur selon les besoins pour y loger les éléments.

Pour résoudre ce problème, une solution efficace consiste à forcer un clearfix avant de fermer le #main_content DIV. Cela nécessite de déplacer le
tag dans ce DIV.

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

Approche moderne avec Flexbox

Pour une solution plus contemporaine, envisagez d'utiliser Flexbox, une méthode de mise en page plus récente en CSS3. Cette technique permet des dispositions de boîtes flexibles, où les éléments sont disposés en colonne ou en ligne avec des tailles personnalisables et un redimensionnement automatique.

Pour implémenter Flexbox, définissez le conteneur parent en tant que conteneur flexible et définissez sa direction de flexion sur en colonne. Cela garantit que les éléments enfants s’empilent verticalement. Ensuite, attribuez la propriété flex à la section de contenu principale pour indiquer qu'elle doit se développer pour occuper l'espace disponible.

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

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

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

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

En incorporant ces techniques, vous pouvez efficacement obtenir le comportement souhaité où le #main_content DIV ou son équivalent Flexbox moderne se redimensionne dynamiquement pour englober tous les DIV enfants, offrant un design visuellement attrayant et réactif.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!