@@Hans > Hi, habe den Link oben gepostet. Da kommen wir der Sache schon näher. Du willst verhindern, das der Anfang des Hauptinhalts unter den fixen Header rutscht (beim Laden der Seite). `margin-top` in `%` ist dazu der völlig falsche Weg. Du weißt nicht, in welchem Verhältnis die Headerhöhe zur Viewporthöhe steht. Und du weißt auch nicht, bei welcher Vieportbreite das Menü im Header zweizeilig wird. (Du weißt es auf deinem System; aber nicht, wie es bei anderen ist, wo möglicherweise der Text in einer anderen Schriftart/-größe dargestellt wird.) Deshalb ist auch media query hier der völlig falsche Weg. Die gute Nachricht aber ist: Du brauchst (fürs erste) gar kein `margin-top`, um der Anfang des Hauptinhalts nicht unter den fixen Header rutschen zu lassen. Setze den Header nicht auf `position: fixed`{:.bad}, sondern auf `position: sticky`{:.good} – fertig … … fast. Wenn ein Link auf Seitenabschnitt angesprungen wird, soll dessen Anfang (dessen Überschrift) auch nicht unter den Header rutschen – wie in [diesem Beispiel](https://codepen.io/gunnarbittersmann/pen/BaJGJQo). Und dann muss man doch die (unbekannte) Höhe des Headers verwenden und der CSS-Eigenschaft `scroll-padding-top` zuweisen. Um nicht direkt mit JavaScript im CSS rumzupfuschen per *custom property*{:@en}: ```css html { scroll-padding-top: var(--header-height) } ``` Die Ermittlung der aktuellen(!) Headerhöhe per [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) und Übergabe an die *custom property*{:@en} [wie unlängst gezeigt](https://forum.selfhtml.org/self/2022/mar/06/strange-rendering-bug-im-firefox/1797318#m1797318): ```js const resizeObserver = new ResizeObserver(entries => { document.documentElement.style.setProperty( '--header-height', `${entries[0].target.offsetHeight}px` ); }); resizeObserver.observe(document.querySelector('.w3-top')); ``` wie in diesem [Beispiel](https://codepen.io/gunnarbittersmann/pen/JjMeOep). Bei dir ist `.w3-top` das zu überwachende Element. Das sollte aber kein `div`{:.bad}, sondern ein `header`{:.good} sein, vermutlich mit `nav` drin (oder gleich `nav`{:.good} ohne `header`. Das andere `div`{:.bad} wäre gern ein `main`{:.good}-Element, siehe [Seitenstrukturierung](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Seitenstrukturierung). --- Eine andere Möglichkeit wäre, gar nicht den ganzen Viewport scrollen zu lassen, sondern nur den Hauptbereich, [so wie hier](https://codepen.io/gunnarbittersmann/pen/qBEXVKZ). 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix

@@Hans > Hi, habe den Link oben gepostet. Da kommen wir der Sache schon näher. Du willst verhindern, das der Anfang des Hauptinhalts unter den fixen Header rutscht (beim Laden der Seite). `margin-top` in `%` ist dazu der völlig falsche Weg. Du weißt nicht, in welchem Verhältnis die Headerhöhe zur Viewporthöhe steht. Und du weißt auch nicht, bei welcher Vieportbreite das Menü im Header zweizeilig wird. (Du weißt es auf deinem System; aber nicht, wie es bei anderen ist, wo möglicherweise der Text in einer anderen Schriftart/-größe dargestellt wird.) Deshalb ist auch media query hier der völlig falsche Weg. Die gute Nachricht aber ist: Du brauchst (fürs erste) gar kein `margin-top`, um der Anfang des Hauptinhalts nicht unter den fixen Header rutschen zu lassen. Setze den Header nicht auf `position: fixed`{:.bad}, sondern auf `position: sticky`{:.good} – fertig … … fast. Wenn ein Link auf Seitenabschnitt angesprungen wird, soll dessen Anfang (dessen Überschrift) auch nicht unter den Header rutschen – wie in [diesem Beispiel](https://codepen.io/gunnarbittersmann/pen/BaJGJQo). Und dann muss man doch die (unbekannte) Höhe des Headers verwenden und der CSS-Eigenschaft `scroll-padding-top` zuweisen. Um nicht direkt mit JavaScript im CSS rumzupfuschen per *custom property*{:@en}: ```css html { scroll-padding-top: var(--header-height) } ``` Die Ermittlung der aktuellen(!) Headerhöhe per [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) und Übergabe an die *custom property*{:@en} [wie unlängst gezeigt](https://forum.selfhtml.org/self/2022/mar/06/strange-rendering-bug-im-firefox/1797318#m1797318): ```js const resizeObserver = new ResizeObserver(entries => { document.documentElement.style.setProperty( '--header-height', `${entries[0].target.offsetHeight}px` ); }); resizeObserver.observe(document.querySelector('.w3-top')); ``` wie in diesem [Beispiel](https://codepen.io/gunnarbittersmann/pen/JjMeOep). Bei dir ist `.w3-top` das zu überwachende Element. Das sollte aber kein `div`{:.bad}, sondern ein `header`{:.good} sein, vermutlich mit `nav` drin (oder gleich `nav`{:.good} ohne `header`. Das andere `div`{:.bad} wäre gern ein `main`{:.good}-Element, siehe [Seitenstrukturierung](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Seitenstrukturierung). --- Eine andere Möglichkeit wäre, gar nicht den ganzen Viewport scrollen zu lassen, sondern nur den Hauptbereich, [so wie hier](https://codepen.io/gunnarbittersmann/pen/rNmVGZd) 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix