Link: https://www.joshwcomeau.com/css/height-enigma/

In deze blogpost onderzoekt Josh W. Comeau het vaak verwarrende gedrag van percentage-gebaseerde hoogtes in CSS. Hij legt uit waarom het instellen van height: 100% of height: 50% niet altijd het verwachte resultaat oplevert, en biedt inzichten in de onderliggende mechanismen van CSS-layouts.

• Verschil tussen width en height: Waar width van een element wordt berekend op basis van de breedte van de ouder, wordt height vaak bepaald door de hoogte van de kinderen. Dit kan leiden tot een cirkelreferentie wanneer zowel ouder als kind hun hoogte van elkaar proberen af te leiden.
• Het belang van 'knowable heights': Voor percentage-gebaseerde hoogtes om te werken, moet de hoogte van het ouder-element expliciet zijn gedefinieerd (bijvoorbeeld met height: 300px of height: 24rem).
• Effect van padding op hoogteberekeningen: Wanneer een ouder-element padding heeft, wordt de percentage-gebaseerde hoogte van het kind berekend op basis van de content-box van de ouder, niet de totale hoogte inclusief padding.
• Gebruik van min-height: Hoewel min-height een minimale hoogte instelt, blijft de uiteindelijke hoogte afhankelijk van de inhoud, wat kan leiden tot onverwacht gedrag bij percentage-gebaseerde hoogtes.
• Oplossingen met Flexbox en Grid: Door over te schakelen naar display: flex of display: grid kunnen kinderen automatisch de beschikbare ruimte opvullen zonder expliciete hoogte-instellingen.

<div class="container">
  <div class="child">Ik wil 100% hoogte</div>
</div>

.container {
  /* Geen vaste hoogte! */
  border: 2px dashed red;
}

.child {
  height: 100%; /* Werkt niet zoals verwacht */
  background-color: lightblue;
}

<div class="container">
  <div class="child">Ik vul nu de hoogte!</div>
</div>

.container {
  height: 300px; /* hoogte is nu 'knowable' */
  border: 2px dashed green;
}

.child {
  height: 100%; /* Werkt nu */
  background-color: lightgreen;
}

<div class="container">
  <div class="child">Flex-oplossing</div>
</div>

.container {
  display: flex;
  flex-direction: column;
  height: 300px;
  border: 2px dashed blue;
}

.child {
  flex: 1; /* Vult automatisch de ruimte */
  background-color: lightcoral;
}

Het artikel biedt een goede inzicht in hoe CSS omgaat met hoogteberekeningen, vooral bij gebruik van percentages. De uitleg over de cirkelreferentie tussen ouder en kind bij hoogte-instellingen was bijzonder verhelderend. Daarnaast is het interessant hoe Flexbox en Grid als oplossingen kunnen dienen voor deze uitdagingen.

Deze inzichten moedigen me aan om bewuster om te gaan met hoogte-instellingen in CSS, vooral bij gebruik van percentages. Het benadrukt het belang van het expliciet definiëren van hoogtes waar nodig en het overwegen van alternatieve layout-methoden zoals Flexbox en Grid om consistente en voorspelbare layouts te creëren.