nicht angemeldet
Gunnar Bittersmann@@Matthias Scharwies
Das ist ein Use case für Grid Layout: CSS/Tutorials/Grid/Grid-Items#Anwendungsbeispiele
Wobei das mit Flexbox auch machbar ist.
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.
Aber bitte nicht so!
Es ist eine sehr schlechte Idee, den Inhalt des Headers in 150px zwängen zu wollen – ohne jegliche Kenntnis, wieviel Platz der Inhalt beim $Nutzer tatsächlich beansprucht.
grid-template-rows: auto 1fr 1fr auto scheint mir da deutlich sinnvoller.
BTW: body { min-height: 100vh } erzwingt vertikales Scrollen – wenn man sich nicht um den default margin kümmert.
😷 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
oxo888oxo
Rolf B
Matthias Scharwies
Der Martin
Henry