Gunnar Bittersmann: height, min-height

Beitrag lesen

@@Rolf B

body {
   margin: 0;
   padding: 8px;
   box-sizing: border-box;
   min-height: 100vh;
}

Wobei man box-sizing sinnvollerweise für alle Elemente auf border-box setzt. Die Eigenschaft wird ja nicht vererbt. [MDN]

Und für generierte Pseudoelemente gleich mit:

*, ::before, ::after { box-sizing: border-box }

Beispiel


oder, wenn man legitimerweise auf IE<9 pfeift:

body {
   margin: 8px;   /* oft Browser-Default, aber sicher ist sicher */
   min-height: calc(100vh - 16px);
}

?? Warum da mit calc() hantieren? Die erste Variante war wohl die bessere – so gut, dass es keines Oders bedurft hätte.

Außerdem weist die zweite die fatale Unschönheit auf, dass zwei Werte voneinander abhängig sind. Wenn man einen ändert, muss man den anderen auch ändern, was aber leicht vergessen werden kann.

Wenn, dann müsste man das so machen:

body {
  --body-margin: 0.5em;
  margin: var(--body-margin);
  min-height: calc(100vh - 2 * var(--body-margin));
}

Die Ersetzung von 8px durch 0.5em hab ich gleich mal mitgemacht.

😷 LLAP

--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon