Neuer Versuch. Frage zur Höhe der Elemente.

[Matthias Scharwies]

Servus!

Hallo

Ich habe jetzt nochmal einen Versuch gemacht. Da habe ich die 4 Bereiche <header>, <nav>, <main> und <footer> mit unterschiedlichen Hintergrundfarben einfärben. Der Zweck ist, dass ich damit das Layout-Gerüst für mich erstmal leichter sichtbar und verstehbar mache.

Jetzt kleben die Elemente ja alle oben. Wenn ich die Elemente jetzt mit Inhalten füllen, werden die ja jeweils nach unten länger.

Wenn ich aber nun z.B. im <main> nur recht wenig Inhalt habe, wird der Bereich ja immer noch recht kürz. Und das schaut dann ja schon nicht schön aus.

Wie mache ich es denn, dass in meinem Beispiel der <main> Bereich mindestens den restlichen Platz in der Höhe (nach Abzug von header, nav und footer einnimmt?

Das ist ein Use case für Grid Layout: CSS/Tutorials/Grid/Grid-Items#Anwendungsbeispiele

body {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;	
  grid-template-rows: 150px 1fr 1fr 100px;
  min-height: 100vh;
}

Du lässt den Body mit min-height: 100vh über die ganze Viewporthöhe gehen. Dieser Platz wird mit grid-template-rows auf header (1.Wert), footer (letzter Wert) und je 1fr aufgeteilt. Das sind Bruchteile des noch verfügbaren Platzes. Früher wurde sowas mit JS berechnet, heute ist das in CSS drin.

Und wenn das geht, ist es denn überhaupt sinnvoll, dass so zu machen? Oder fängt man sich da dann wieder andere Folge-Probleme ein?

Normal nicht, falls ja, müsste man gucken, was mn nicht bedacht hat oder wie man das umgeht.

Herzliche Grüße

Matthias Scharwies