CSS: margin-top unkompliziert ändern bei mobilem Endgerät

[Gunnar Bittersmann]

@@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, sondern auf position: sticky – fertig …

… fast. Wenn ein Link auf Seitenabschnitt angesprungen wird, soll dessen Anfang (dessen Überschrift) auch nicht unter den Header rutschen – wie in diesem Beispiel.

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:

html { scroll-padding-top: var(--header-height) }

Die Ermittlung der aktuellen(!) Headerhöhe per ResizeObserver und Übergabe an die custom property wie unlängst gezeigt:

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.

Bei dir ist .w3-top das zu überwachende Element. Das sollte aber kein div, sondern ein header sein, vermutlich mit nav drin (oder gleich nav ohne header.

Das andere div wäre gern ein main-Element, siehe Seitenstrukturierung.

---

Eine andere Möglichkeit wäre, gar nicht den ganzen Viewport scrollen zu lassen, sondern nur den Hauptbereich, so wie hier.

🖖 Живіть довго і процвітайте