Vieport ohne vertikalen Skrollbalken bei Grid-Strukturierung
bearbeitet von Rolf BHallo Yogibaer,
wir duzen uns hier :)
Wenn Du alle Rows mit fr angibst, dann führt der Browser eine Optimierung durch. Alles, was 1fr ist, soll ja gleich hoch sein. Also guckt er sich die drei 1fr Bereiche an und prüft, wie hoch das ist. Zum Beispiel: 200 Pixel. In Summe hast Du 8fr angegeben, darum werden die 1fr Bereiche nun alle 200 Pixel hoch und der 5fr Bereich 1000 Pixel. Zusammen 1600 Pixel.
Das willst Du meistens nicht. Wenn Du das Browserfenster ausfüllen willst, nimmst Du sinnvoller `grid-template-rows: auto auto 1fr auto;` d.h. mache Header, Navigation und Footer so hoch wie nötig und lass den Main-Bereich den Rest ausfüllen. Das passiert, wenn du dem body noch height: 100vh gibst.
Problem ist jetzt noch der Margin, den das body-Element vom Browser bekommt. Der wird bei der 1fr-Berechnung nicht abgezogen. Deswegen sagte Gunnar, du solltest das nullen:
~~~css
body { margin:0; padding: 0; }
~~~
_Rolf_
--
sumpsi - posui - clusi