html, Körper und divs mit Höhe 100%

Question

Ich habe eine Menge Inhalte, die unter dem unteren Rand des Bildschirms gestreckt. Oben auf der Seite habe ich ein div mit einem "Heldenbild". Das div füllt die Höhe des Bildschirms. Ich habe dies acheived indem:

html, body { height: 100%; } 
.hero_div { height: 100%; } 

Aber ich verstehe nicht, warum das funktioniert.

Wenn ich die Höhe 100% aus dem Körper entferne, ist die Höhe 3978 Pixel (die Höhe der gesamten Seite/Inhalt). Aber bei einer Höhe von 100% beträgt die Höhe des Körpers nur 653 Pixel (die Höhe des Bildschirms), aber der Inhalt unter diesem 653 Pixel wird immer noch angezeigt.

Sicher Körper mit Höhe 100% sollte die Höhe des gesamten Inhalts/Seite innerhalb der Body-Tag sein (in diesem Fall 3978px)?

Answer 1

Sicherlich Körper mit einer Höhe von 100% der Höhe aller content/Seite innerhalb des Body-Tag sein sollte

No. Die height: 100% bedeutet "100% der Höhe des Inhalts des Elements" not " 100% der Höhe des Inhalts des Elements ".

Der Container für das HTML-Element ist (effektiv) das Ansichtsfenster.

aber der Inhalt unter diesem 653px wird weiterhin angezeigt.

Der Standardwert für overflow ist nicht hidden.

Answer 2

Schauen Sie sich es auf diese Weise:

Wenn Sie html und body-100% Höhe begrenzen, seine Inhalt wird gescrollt werden, das heißt der Inhalt von ‚Körper‘.

Wenn Sie eine Höhe nicht auf ‚Körper‘ setzen, body wird die volle Höhe ihres Inhalts und wird innerhalb HTML