CSS --> die Höhe vom div ist größer als die vom Body?

...komplette Frage anzeigen

2 Antworten

Ich habe die Elemente html und body, die beide eine Höhe von 100% haben(ganzer Bildschirm).

Allein dieser Ansatz ist schon falsch. Du kannst ja mal zum Test dem HTML und Body-Element einen Rand (border) geben und dir selber anschauen, was genau die 100% Höhe bewirkt. 

Zum Schluss hab ich noch ein div. Dies sollte einfach die restliche Höhe des Bodys einnehmen.

Auch das ist Käse. Es soll wohl lediglich der restliche Bereich unabhängig von der Größe des Viewports mit dem Div ausgefüllt werden. Dafür kannst du unter anderem den den CSS3 Viewport-Units arbeiten. 

Also hab ich dem div eine Höhe von 100% verpasst. Nur leider ist jetzt das div um genau die 50px größer als der Body.

Die 100% Höhe bei allen Elementen (html, body und div) entfernen. Deinem Header nun eine fixe Höhe von 50px zuweist und dem darauf folgendem Div hingegen eine Höhe von 100vh. Mehr ist eigentlich nicht notwendig. 

header {height: 50px;}

div {height: 100vh;}

Zu guter Letzt noch ein gut gemeinter Tipp an dich. Verwende statt Inline-Styles ein externes Stylesheet. So wird das Markup sauber von dessen Formatierung getrennt. Vor allem nicht so schnell den Überblick verlierst.

LG medmonk 

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von xpr0gamers
10.02.2017, 10:31

Danke dir. Das ist genau die Erklärung die ich haben wollte.

0

Der body hat halt 100%, dein Container hat auch 100%. Alle Childs des body orientieren sich bei der prozentualen Höhe am body. Hat dein Container also 100%, ist er genauso hoch wie der body. Und der header halt + 50px.
Entweder gibst du deinem header auch einen Prozentsatz und zieht den von der Containerhöhe ab (z.B. 5% und 95%) oder du flext deinen body.

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von xpr0gamers
09.02.2017, 21:06

was genau meinst du mit flext?

0
Kommentar von abbrechen
10.02.2017, 03:08

In diesem Fall wird immer alles untereinander gepackt und kann nicht höher als der body sein.

0

Was möchtest Du wissen?