Rolf B: 1fr Höhenangaben in einem Grid

Beitrag lesen

SELF-Forum

1fr Höhenangaben in einem Grid

Rolf B (Versionen)
– Informationen zu den Bewertungsregeln

Hallo,

ich habe ein Seitenlayout, das ich gar nicht für so kompliziert halte. Der Body soll 100vh hoch sein, hat einen head mit Auto-Höhe, und dann zwei Streifen, die gleich hoch sein sollen. Streifen 1 besteht aus nav und main, Streifen 2 ist ein footer (das ist ein Debug-Layout, der Footer enthält Log-Infos, darum soll er höher sein).

body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template: "head head" auto
                 "nav main" 1fr
                 "foot foot" 1fr
                 / 10em 1fr;
}

Zum Zweck der Diskussion kann der body des HTML minimal sein.

<body>
<header><h1>Header</h1></header>
<nav>NAV</nav>
<main>
  <header><h2>Header 2</h2></header>
  <ul>
  <li>Item</li>...20 stück...<li>Item</li>
  </ul>
</main>
<footer>Fooo</footer>
</body>

Innerhalb von main möchte ich, dass h2 ständig sichtbar ist und die Liste scrollt. Vermutlich könnte ich das mit Subgrid lösen, oder einem komplexeren Body-Grid. Ich wollte das Layout des main-Bereichs aber austauschbar und separat halten und habe darum ein eigenes Grid daraus gemacht.

main {
  grid-area: main;
  display: grid;
  grid-template-rows: auto 1fr;
}
main ul {
  overflow-y: scroll;
}

Aber: Das funktioniert nicht. Der Browser (Chrome und Firefox) vergrößert statt dessen den 1. Streifen, so dass alle li sichtbar werden. Wenn die 100vh des body nicht ausreichen, macht er ihn auch höher (und erzeugt den Scrollbar, den ich nicht will)

Ich habe dazu neulich selbst was geschrieben, finde es aber nicht wieder - Problem müsste sein - wenn ich mich recht erinnere - dass die Höhe eines inneren Elements bei relativen Höhenangaben in äußeren Containern nicht eingegrenzt wird. Dazu braucht es absolute Angaben.

Wenn ich die 1fr Angaben im Body-Grid durch calc(50vh - 1.5em) ersetze und den Header auf 3em festsetze, dann bekommt die Liste ihren Scrollbar. Aber diese Starrheit will ich nicht.

Was ich herausgefunden habe: Gebe ich dem main-Element ein overflow-y: hidden, DANN werden die 1fr Angaben des body-Grid auf einmal beachtet und die Liste im main bekommt einen Scrollbar.

-> https://jsfiddle.net/Rolf_b/v38w6mLn/

Liegt das daran, dass overflow:hidden einen block formatting context erzeugt? Geht das irgendwie besser? Ich habe es mit dem contain-Attribut versucht. Die Werte layout, paint oder content sollen ja auch einen BFC erzeugen - aber nein. Das löst es nicht. Aber: contain:size; - das löst es auch.

Bevor ich das blog- oder wikifiziere: Doktere ich hier an Symptomen herum und mache was anderes grundsätzlich falsch? Oder ist das, was ich da getan habe, so im Sinne des CSS Erfinders?

Update: Da hab ich wohl vor einem Jahr schon mal gebastelt - und die Antwort auf den Titel jenes Threads lautet offensichtlich: "Nein, Rolf!". Aber overflow:hidden auf dem img scheint auch mein damaliges Problem zu lösen. Dann klappt es sogar ohne ein Hilfs-Div. contain:size dagegen hilft nicht.

Rolf

--
sumpsi - posui - obstruxi
Beitrag melden
–
Informationen zu den Bewertungsregeln