CSS VH mit Padding/Margin?

Hallo,

irgendwie stehe ich etwas auf dem Schlauch und hoffe, dass ihr mir helfen könnt.

Ich habe einen header, der 2 sections enthält. section 1 ist die Navigation, section 2 ist der hero-Bereich.

Ich möchte nun, dass der komplette header-Bereich immer 100vh (also den vollständigen Viewport) beim Öffnen der Seite abdeckt. Dafür habe ich section 1 5vh und section 2 95vh gegeben. Nach meiner Rechnung müsste das doch funktionieren, oder?

Ich dachte 100vh sind immer die Höhe des Viewports?

Nun habe ich natürlich für section 1 padding genutzt, damit die Navigation nicht oben am Bildschirm klebt. Kann man Padding und Margin irgendwie rausrechnen, oder wie macht man das richtig?

Danke euch

Hallo, wenn du nicht die Größe des Bereichs weißt, gib ihn in Prozent an.
Also x Prozent des Bildschirms (Undabhängig von der verwendeten Auflösung)
Wenn du nicht die Viewport specs kennst z.B der Viewport ist 50 cm breit , 1vw = 0.5cm würde ich es über % regeln.

Desweitteren wäre Sample deiner Seite wäre praktisch um sich ein besseres Bild zu machen.

Damit rechnet der Browser das Padding in die Dimensionsangaben ein.

Box-sizing habe ich, funktioniert aber nicht.

Noch eine Möglichkeit ist es, mittels calc() die Höhe zu berechnen. Damit kann man auch verschiedene Einheiten vermischen, z. B. calc(5vh - 20px).

Ich verstehe das Problem nicht:

https://jsfiddle.net/ujk7h55h/1/

Du hast recht. Funktioniert sogar mit paddiing und margin. Dann muss ich mein CSS wohl noch mal kontrollieren.

Grundsätzlich: Ist das dann so der richtige Weg, oder sollte man es anders machen?