Vieport ohne vertikalen Skrollbalken bei Grid-Strukturierung

[Yogibaer]

Hallo zusammen, ich mache meine ersten Gehversuche mit der Grid-Strukturierung. Alle Maßangaben sind im fr-Maßstab. Die Seite soll eine Kopfzeile, eine Navizeile, ein paar Mainzeilen und eine Fußzeile haben. Höhenangaben habe ich bisher keine gemacht. Der Standard−meta-Eintrag für viewport ist vorhanden.

die Grid-Definition lautet:

body:{ display: grid;
       grid-template−row: 1fr 1fr 5fr 1fr;}

Problem: Die Fußzeile ist im Fenster vom Firefox gar nicht oder nur ein sehr dünnner Streifen davon zu sehen, egal wie weit ich das Firefox-Fenster auf- oder zuziehe. Mit dem Skrollbalken kann ich sie erreichen. Meine Vorstellung ist, dass sich die Struktur an den Viewport anpasst. Was muss ich ändern.

Gruß Yogibaer

[Gunnar Bittersmann]

@@Yogibaer

Problem: Die Fußzeile ist im Fenster vom Firefox gar nicht oder nur ein sehr dünnner Streifen davon zu sehen […] Was muss ich ändern.

Den Abstand vom body nullen?

LLAP 🖖

War das eine Frage.
War das eine Antwort?

[Yogibaer]

Ich habe im Tutorial nachgesehen, dass die Gridlinien-Zählung bei "1" beginnt. So kann ich aus Ihrem Kommentar leider nicht ablesen, was ich eintragen muss.

Gruß Yogibaer

[Rolf B]

Hallo Yogibaer,

wir duzen uns hier :)

Wenn Du alle Rows mit fr angibst, dann führt der Browser eine Vergleichsrechnung durch. Alles, was 1fr ist, soll ja gleich hoch sein. Also guckt er sich die drei 1fr Bereiche an und prüft, wie hoch sie auf Grund ihres Inhalts sind. Zum Beispiel: 200 Pixel. Darum werden die 1fr Bereiche nun alle 200 Pixel hoch und der 5fr Bereich 1000 Pixel. Zusammen 1600 Pixel.

Das willst Du bei einem Grid für's Seitenlayout eher 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 height: 100vh gibst (nicht 100%!).

Problem ist jetzt noch der Margin (=Abstand), den das body-Element vom Browser bekommt. Der wird bei der 1fr-Berechnung nicht abgezogen und deswegen bekommst Du den Scrollbar. Deswegen sagte Gunnar, du solltest "den Abstand nullen". Das Padding sicherheitshalber gleich auch:

body { margin:0; padding: 0; }

Statt padding:0 kann man auch box-sizing:border-box verwenden, dann vergrößeren Padding und Border deine Größenangaben nicht (eins der wenigen guten Erbstücke des Internet-Explorers)

Rolf

[Gunnar Bittersmann]

@@Yogibaer

Ich habe im Tutorial nachgesehen, dass die Gridlinien-Zählung bei "1" beginnt. So kann ich aus Ihrem Kommentar leider nicht ablesen, was ich eintragen muss.

Hat mit dem Grid nichts zu tun. „Den Abstand vom body nullen“: body { margin: 0 }

LLAP 🖖

[Yogibaer]

Jetzt klappts. Vielen dank Euch beiden.