Vertikale Ausrichtung in grid

[Nickily]

Hallo, in den footer eines Grid-Layouts soll nur das Impressum rein, es soll rechts unten stehen. Ich schaffe es, den Text rechts auszurichten, aber ich finde nicht den richtigen Befehl, um ihn nach unten auszurichten. Reicht Euch das als Code, oder braucht Ihr den ganzen Zusammenhang ? Danke schonmal.

.fussbereich { grid-column: 1 / 8; grid-row: 8; text-align: right; }

[Rolf B]

Hallo Nickily,

ja, ein Link auf die Seite wäre schon hilfreich.

Meine Hypothese:

Damit der Footer unten steht, muss das Grid so hoch - oder mindestens so hoch - wie das Fenster sein. Ein height oder min-height von 100vh auf dem Body könnte Wunder wirken, allerdings musst Du noch ein bisschen nachhelfen, sonst bekommst Du einen Scrollbar.

Der Body hat nämlich einen kleinen Margin, und der macht die Seite bei height:100vh höher als 100% der Viewport-Höhe. Also - entweder den Margin auf 0 setzen, oder die Höhe des Body entsprechend reduzieren:

body {
   margin: 8px;
   min-height: calc(100vh - 16px);
   box-sizing: border-box;
}

box-sizing brauchst Du nur, wenn der Body border oder padding hat.

Es kann dann immer noch schief gehen, wenn im Body vorneweg ein Element steht, dass ein margin-top von mehr als 8px hat. Ein <h1> zum Beispiel. Per Default würde dieser Margin über den Body hinausragen und dessen margin-top vergrößern.

Wenn dein Body das grid ist, ist es KEIN Problem, weil Grid-Kinder automatisch einen eigenen Block-Formatting-Context bekommen, der Margins einsperrt.

Andernfalls sollte der Body noch overflow:hidden bekommen, damit wird ebenfalls ein Block Formatting Context erzeugt. Collapsing margins und block formatting context sind eine Wissenschaft für sich...

Rolf

[Nickily]

Danke Rolf, die Seite gibt es noch nicht, im Moment probiere ich den Code nur im Rechner aus. Was kann ich Dir denn sonst noch liefern ?

[Gunnar Bittersmann]

@@Rolf B

box-sizing brauchst Du nur, wenn der Body border oder padding hat.

Unbedingt brauchen oder nicht, sinnvoll ist dieses Box-Modell allemal (in den meisten Fällen), wehalb mal gut daran tut, das für sämtliche Elemente und generierte Pseudoelemente zu setzen:

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

😷 LLAP

[Nickily]

Hallo Gunnar, ich hatte ursprünglich border-box on meinem Code, habe es aber dann auf content-box abgeändert, denn border-box verursachte einen overflow, den ich mir aber nicht erklären kann.

[Matthias Scharwies]

Servus!

Hallo, in den footer eines Grid-Layouts soll nur das Impressum rein, es soll rechts unten stehen. Ich schaffe es, den Text rechts auszurichten, aber ich finde nicht den richtigen Befehl, um ihn nach unten auszurichten.

Reicht Euch das als Code, oder braucht Ihr den ganzen Zusammenhang ? Danke schonmal.

.fussbereich { grid-column: 1 / 8; grid-row: 8; text-align: right; }

Wahrscheinlich ist es einfacher grid-column: 1 / -1; zu notieren, dann bist du auf der sicheren Seite, falls mal die Anzahl der Spalten geändert wird.

Aus eben diesem Grund würde ich grid-row: 8;weglassen, falls mal mehr Inhalt dazu kommt, der dann unter dem footer zu stehen kommt.

Hier ein Beispiel für einen feststehenden Footer:

• CSS/Tutorials/Grid/Grid-Items #feststehender_Footer

Und hier eins, in dem das Impressum unten rechts im Rasterfeld positioniert wird:

• CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items #Impressum_unten_rechts

Herzliche Grüße

Matthias Scharwies

[Hans Wurst]

Servus!

Hallo,

Aus eben diesem Grund würde ich grid-row: 8;weglassen, falls mal mehr Inhalt dazu kommt, der dann unter dem footer zu stehen kommt.

Oder Grid-row: -2/-1;

[Nickily]

Vielen Dank an Hans und Matthias. Der Tipp mit dem Link zu "Impressum unten rechts" hat es gebracht.

align-self: end; justify-self: end;

richten den Text im Feld unten aus, ich habe es über F12 nochmal nachgespielt.