Fixierter Header mit Flexbox-Verfahren klappt nicht richtig

[quincunx]

@@Detlef

Ich muss mich erst intensiver besonders mit dem Script beschäftigen, um ihn zu durchschauen.

Beim onload wird vom header die Höhe ermittelt

window.onload = function() {
    document.getElementsByTagName('main')[0].style.top = document.getElementsByTagName('header')[0].offsetHeight + 'px'
}

und mit diesen Wert der top Abstand von main nachgezogen.

Beide erhaltenen Vorschläge funktionieren wohl so, wie ich es mir vorstelle.

Der Vorschlag von MrMurphy1 ist näher bei deinem Ansatz, auch wenn ich nicht verstehe wie er funktioniert (flex: 1 0 1% ?). Bei meinem Ansatz ist der Scrollbalken rechts am Browserrand.

Wenn ich mein bestehendes Webprojekt mit einigen hundert Seiten entsprechend umgestalte, sollte es langfristigen Bestand haben.

Ohne Javascript Kenntnisse würde ich den Vorschlag von MrMurphy1 vorziehen, denn mein Beispiel ist nur quick&dirty und müsste verfeinert werden zB: onresize etc.…

Ich habe schon mehrfach gelesen, dass statt 100vh besser 100% verwendet werden soll - was ist nun wirklich empfehlenswert?

Dazu weiß vielleicht Gunnar etwas genaueres.

gr qx