[CSS] DIV 100% Höhe / Breite

Diese Frage taucht immer wieder auf:
Wie kann ich einen DIV-Container mit einer Höhe bzw. Breite von 100% definieren?

Ganz einfach! Es nützt nichts, wenn man nur den DIV-Container ansich mit 100% definiert. Wichtig ist, dass die “umschließenden Elemente” dann auch mit einer Höhe bzw. Breite von 100% definiert sind.
Hier mal ein kurzes Beispiel:

html, body {
  height: 100%;
}
 
#100_prozent_div {
  width: 250px;
  height:100%;
}

Da normalerweise das html und body Tag die “umschließenden” Elemente eines DIV sind, werden diese ganz einfach auf 100% gesetzt. In diesem Beispiel habe ich nur die Höhe auf 100% gesetzt. Diese Methode gilt natürlich auch für die Breite oder beides.