1fr Höhenangaben in einem Grid – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self 1fr Höhenangaben in einem Grid Sun, 23 Jan 22 20:32:08 Z https://forum.selfhtml.org/self/2022/jan/23/1fr-hohenangaben-in-einem-grid/1795639#m1795639 https://forum.selfhtml.org/self/2022/jan/23/1fr-hohenangaben-in-einem-grid/1795639#m1795639 <p>Hallo,</p> <p>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).</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template</span><span class="token punctuation">:</span> <span class="token string">"head head"</span> auto <span class="token string">"nav main"</span> 1fr <span class="token string">"foot foot"</span> 1fr / 10em 1fr<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Zum Zweck der Diskussion kann der body des HTML minimal sein.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>NAV<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Header 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>...20 stück...<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span>Fooo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> </code></pre> <p>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.</p> <pre><code class="block language-css"><span class="token selector">main</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> main<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> auto 1fr<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">main ul</span> <span class="token punctuation">{</span> <span class="token property">overflow-y</span><span class="token punctuation">:</span> scroll<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>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)</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>-> <a href="https://jsfiddle.net/Rolf_b/v38w6mLn/" rel="noopener noreferrer">https://jsfiddle.net/Rolf_b/v38w6mLn/</a></p> <p>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: <code>contain:size;</code> - das löst es auch.</p> <p>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?</p> <p>Update: Da hab ich wohl <a href="https://forum.selfhtml.org/self/2021/feb/15/hohenangaben-werde-ich-das-jemals-verstehen/1784178#m1784178" rel="noopener noreferrer">vor einem Jahr</a> schon mal gebastelt - und die Antwort auf den Titel jenes Threads lautet offensichtlich: "Nein, Rolf!". Aber overflow:hidden auf dem img scheint auch mein <a href="https://jsfiddle.net/Rolf_b/2r1whf57/7/" rel="noopener noreferrer">damaliges Problem</a> zu lösen. Dann klappt es sogar ohne ein Hilfs-Div. contain:size dagegen hilft nicht.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> 1fr Höhenangaben in einem Grid Mon, 24 Jan 22 07:12:22 Z https://forum.selfhtml.org/self/2022/jan/23/1fr-hohenangaben-in-einem-grid/1795642#m1795642 https://forum.selfhtml.org/self/2022/jan/23/1fr-hohenangaben-in-einem-grid/1795642#m1795642 <p>Hallo Rolf,</p> <pre><code class="block language-css"> <span class="token property">grid-template</span><span class="token punctuation">:</span> <span class="token string">"head head"</span> auto <span class="token string">"nav main"</span> 1fr <span class="token string">"foot foot"</span> 1fr / 10em 1fr<span class="token punctuation">;</span> </code></pre> <p>Dies war der Anlass meiner Bastelei, es passiert aber auch bei einem footer mit fester Höhe. Wenn main seinerseits ein Grid wird, braucht es contain:size oder overflow:hidden, damit seine Höhe limitiert werden kann.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> 1fr Höhenangaben in einem Grid Mon, 24 Jan 22 11:00:03 Z https://forum.selfhtml.org/self/2022/jan/23/1fr-hohenangaben-in-einem-grid/1795654#m1795654 https://forum.selfhtml.org/self/2022/jan/23/1fr-hohenangaben-in-einem-grid/1795654#m1795654 <p>Tach!</p> <blockquote> <p>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)</p> </blockquote> <p>Die Einheit fr verteilt nur den "remaining" Platz. Bei mehreren Elementen mit jeweils 1fr bekommen alle Elemente erstmal den Platz, den sie brauchen. Der Rest, wenn noch welcher übrig ist, wird dann aufgeteilt. Zum Beispiel bei drei Elementen ist das eine größer als ein Drittel, dann bekommen die anderen beiden den eventuell verbleibenden Rest, so dass sie gleich groß werden.</p> <p>Für eine generell gleiche Verteilung des Platzes muss man den Elementen im Grid das overflow auf hidden oder auto setzen, zumindest demjenigen, das zu groß werden kann.</p> <p>dedlfix.</p> 1fr Höhenangaben in einem Grid Mon, 24 Jan 22 12:05:25 Z https://forum.selfhtml.org/self/2022/jan/23/1fr-hohenangaben-in-einem-grid/1795658#m1795658 https://forum.selfhtml.org/self/2022/jan/23/1fr-hohenangaben-in-einem-grid/1795658#m1795658 <p>Hallo dedlfix,</p> <p>ja, das ist eben die Verständnisschwierigkeit. Wenn ich ein row-template für Grid auf auto 1fr 1fr setze, erwarte ich doch eigentlich, dass ich damit "von außen nach innen" den Platz definiere. Erste Zeile auto, und Zeile 2+3 sollen sich den remaining space im Verhältnis 1:1 teilen. Wenn ich wollte, dass eine Zeile "mindestens" 1fr bekommt, eventuell mehr und EVENTUELL sogar das ganze Grid seine Höhenbegrenzung auf 100% sprengt (zumindest bei overflow:auto im main), dann würde ich doch kein height oder max-height auf den Body legen und ein anderes Row-Template verwenden.</p> <p>Aber DANN guckt sich der Brauser das Innenleben der Zeilen an und stellt fest, dass eine mehr Platz braucht, und verteilt neu. Es ist nun mal so, und man muss es hinnehmen, aber logisch finde ich es nicht.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> 1fr Höhenangaben in einem Grid Mon, 24 Jan 22 12:11:27 Z https://forum.selfhtml.org/self/2022/jan/23/1fr-hohenangaben-in-einem-grid/1795659#m1795659 https://forum.selfhtml.org/self/2022/jan/23/1fr-hohenangaben-in-einem-grid/1795659#m1795659 <p>Tach!</p> <blockquote> <p>Aber DANN guckt sich der Brauser das Innenleben der Zeilen an und stellt fest, dass eine mehr Platz braucht, und verteilt neu. Es ist nun mal so, und man muss es hinnehmen, aber logisch finde ich es nicht.</p> </blockquote> <p>Ja, das ist etwas ärgerlich, weil man das weder so erwartet (vielleicht auch, weil man das von .NETs XAML nicht so kennt), noch ist das Verhalten von fr so deutlich in den Tutorials beschrieben. Und es fällt oftmals nicht gleich auf, weil man mit wenig Testdaten zunächst nicht merkt, dass die Container sich ausdehnen.</p> <p>dedlfix.</p> 1fr Höhenangaben in einem Grid Mon, 24 Jan 22 12:17:03 Z https://forum.selfhtml.org/self/2022/jan/23/1fr-hohenangaben-in-einem-grid/1795660#m1795660 https://forum.selfhtml.org/self/2022/jan/23/1fr-hohenangaben-in-einem-grid/1795660#m1795660 <p>Hallo dedlfix,</p> <p>XAML? W[TP]F?</p> <p>Ich bin bei WinForms stehen geblieben </p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div>