Wie man die Höhe eines DIV mit seinem Inhalt erweitert

Diese Frage bezieht sich auf die Erweiterung der Höhe eines DIV, um seine inneren DIVs aufzunehmen Beibehalten der Struktur eines Containers DIV. Um dieses gewünschte Verhalten zu erreichen, ist es wichtig, Änderungen am CSS-Layout vorzunehmen.

Ein Ansatz besteht darin, ein „clear: Both;“ hinzuzufügen. Eigenschaft, bevor Sie das #main_content DIV schließen. Diese CSS-Regel weist den Browser an, alle vorangehenden schwebenden Elemente zu ignorieren und sicherzustellen, dass #main_content die gesamte verfügbare Breite im Container-DIV hat. Darüber hinaus können Sie das Element
in das DIV #main_content verschieben und dessen CSS wie folgt festlegen:

.clear {
  clear: both;
}

Alternative Lösung mit Flexbox

Eine modernere Alternative ist die Verwendung von Flexbox, einem CSS3-Layoutmodus, der flexible und reaktionsfähige Layouts ermöglicht. Bei diesem Ansatz können die folgenden CSS-Regeln angewendet werden:

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

HTML-Struktur mit Flexbox:

  

     Header   
    
  

    Content
  

Der obige Flexbox-Ansatz erstellt ein responsives Layout, bei dem der Inhaltsabschnitt automatisch erweitert wird, um den verfügbaren vertikalen Raum auszufüllen und sich gleichzeitig an die Höhe seiner inneren Elemente anzupassen.