Ich möchte, dass mein html-Tag deckt den gesamten Inhalt, wenn es die Webseite überläuft, aber wenn ich html Tag auf 100% setzt es deckt nur die 100% der Höhe und Breite meines Bildschirms. Beispiel: JSFiddle.HTML-Tag deckt nicht den gesamten Inhalt
Wie kann ich machen, dass die html Tag Abdeckung immer den Inhalt?
Vielen Dank im Voraus!
Prozenthöhen werden von der Höhe ihrer Eltern berechnet.
Da das HTML keine Elternhöhe hat, wird die Höhe des Ansichtsfensters angezeigt, was nicht das ist, was Sie wollen.
Was Sie wirklich wollen, zu tun ist, auslassen eine Höhe Erklärung über die html-Tag, und dann .container Höhe dehnt sich der gesamte Inhalt enthalten (da die Eltern nicht mehr eine Höhe hat, kann es so viel erweitern wie es will).
So einfach
html, body{
width: 100%; // no height declaration
}
den Trick.
Ja, so funktioniert es.
Wenn Sie Höhe leer oder automatisch lassen, wird es sich an den Inhalt anpassen.
Wie hoch ist die automatische Höhe des Wurzelelements? –
Danke! Es klappt! Aber können Sie ein bisschen mehr erklären, warum, wenn ich Höhe einstelle: 100% passt es nicht den vollen Inhalt an? –
Höhe: 100% nimmt die volle Höhe eines übergeordneten Elements. Html und body haben jedoch nur Bildschirm als "Eltern", so dass es Höhe des Bildschirms dauert. – Mamut
Versuchen Sie folgendes:
html, body{
width: 100%;
height:max-content;
}
Vielen Dank für die Antwort! Aber ich habe Zweifel: Was ist der Unterschied zwischen 'max-content' und lässt sich die Höhe automatisch anpassen, wenn @Mamut darauf hinweist? –
Eine zusätzliche Frage. Ich brauche, dass die divs, die überläuft, dynamisch sein wird, so dass es auch nur 3 sein kann. Wenn ich Höhe an den Inhalt anpassen lasse, wenn es nur 3 gibt, wird die gesamte Webseite (das gesamte Ansichtsfenster) nicht umgebrochen. Wie kann ich erreichen, dass, wenn weniger Inhalt des gesamten Ansichtsfensters vorhanden ist, die Webseite an das gesamte Ansichtsfenster angepasst wird und wenn es mehr Inhalt als Überläufe gibt, wird sie auch umgebrochen? –
Vielen Dank! Schöne Erklärung! –