@@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
“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