Comment augmenter la hauteur d'un DIV avec son contenu

Cette question concerne l'expansion de la hauteur d'un DIV pour s'adapter à ses DIV internes tout en maintenir la structure d’un conteneur DIV. Pour obtenir le comportement souhaité, il est essentiel d'implémenter des modifications dans la mise en page CSS.

Une approche consiste à ajouter un "clear: Both;" propriété avant de fermer la DIV #main_content. Cette règle CSS demande au navigateur d'ignorer tous les éléments flottants précédents, garantissant que #main_content a toute la largeur disponible dans le conteneur DIV. De plus, vous pouvez déplacer l'élément
dans la DIV #main_content et définir son CSS comme suit :

.clear {
  clear: both;
}

Solution alternative utilisant Flexbox

Une alternative plus moderne consiste à utiliser Flexbox, un mode de mise en page CSS3 qui permet des mises en page flexibles et réactives. Dans cette approche, les règles CSS suivantes peuvent être appliquées :

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

Structure HTML utilisant Flexbox :

  

     Header   
    
  

    Content
  

L'approche Flexbox ci-dessus crée une mise en page réactive dans laquelle la section de contenu se développera automatiquement pour remplir l'espace vertical disponible tout en se conformant à la hauteur de ses éléments internes.