Ich bekomme mein erstes Kind im Körper nicht auf 100% Höhe, wenn der Körper min-height angegeben hat.
Dadurch passt nicht den Wrapper an die Höhe des Fensters an. Wenn ich min- lösche und height verwende, funktioniert es. Aber ich muss die Inhaltshöhe variabel haben ...
Ich habe einige andere Beiträge hier auf SO und auf Google gefunden, aber sie haben nur Fragen und keine Lösung.
Ich habe tatsächlich eine Lösung gefunden!
Jetzt habe ich:
%Vor% Also mein Körper ist nicht min-height . Ich kann mich nicht erinnern, warum ich es in min-height geändert habe, aber ich hoffe, dass ich das Problem, vor dem ich offensichtlich vor einiger Zeit gestanden habe, nicht bewältigen werde ...
Wenn Sie einen Prozentwert für height verwenden, ist dieser immer relativ zum angegebenen height des übergeordneten Elements. Nicht die tatsächliche Höhe des übergeordneten Elements, sondern die in CSS angegebene height .
Wenn Ihr body -Element also nicht height hat (nur min-height , aber das zählt nicht), kann 100% nicht wirksam werden.
Eine mögliche Lösung ist die Verwendung von position: absolute; top: 0; bottom: 0; auf Ihrem #wrapper , und Ihr div wird gestreckt. Dies kann natürlich einige Layout-Konsequenzen haben, die Sie nicht wollen.
Verwenden Sie height:100vh; für Divs, die Sie strecken und den Bildschirm füllen möchten.
Nicht Stellen Sie body's height: 100%; ein. Wenn Sie Seiten haben, deren Inhaltshöhe mehr als 100% beträgt, wird Ihre gesamte Website beschädigt. Sie können nicht scrollen.
Wenn Sie möchten, dass einige Seiten Ihrer Website den gesamten Bildschirm ausfüllen, während andere Seiten scrollen können (weil sie mehr als 100% Inhalt haben), müssen Sie die div-Höhe auf 100% setzen, nicht auf die gesamte Seitenweite Körpergröße.
Verwenden Sie dies als allgemeine siteweite CSS:
%Vor%Setzen Sie dann bestimmte divs, um den gesamten Bildschirm zu füllen (wenn sie weniger als 100% Höhe im Inhalt haben):
%Vor%Erklärung der vh-Messung: Ссылка