Sie möchten also den Hintergrund Ihrer Website rot machen, was? Wahrscheinlich würden Sie das in Ihr CSS schreiben
body {
background: red;
}Fertig!
Sie gehen Ihren Geschäften nach und dann passiert eines Tages plötzlich das
Was zum Teufel? Warum ist das Rot so abgeschnitten? Ich habe die Hintergrundfarbe des Body auf Rot gesetzt?
Das haben Sie, aber die Tatsache, dass diese rote Farbe den Hintergrund flutet, ist nur eine seltsame Anomalie von CSS. Das Body-Element ist nicht wirklich so hoch wie das Browserfenster. Es ist nur so hoch wie der Inhalt darin, genau wie ein Div oder irgendetwas anderes.
Siehe
Wenn das HTML-Element keinen Hintergrund hat, bedeckt der Body-Hintergrund die Seite. Wenn das HTML-Element einen Hintergrund hat, verhält sich der Body-Hintergrund wie jedes andere Element.
Irgendwann wurde dem html-Element eine background-color zugewiesen.
Vielleicht verwenden Sie normalize.css 2.1.1, das das Setzen des Hintergrunds auf Weiß für das html-Element enthielt, um "zu verhindern, dass die Hintergrundfarbe des Systemfarbschemas in Firefox, IE und Opera verwendet wird." Dies wurde inzwischen rückgängig gemacht, vermutlich weil es dieses Problem zu weit verbreitet verursachte.
Um es zu "reparieren", entfernen Sie einfach den Hintergrund im html-Element oder verschieben Sie alles, was Sie "fluten" möchten, immer in das html-Element, da sein Verhalten konsistent ist.
Nur eine kurze Anmerkung: Das Setzen des Hintergrunds auf
transparentim html-Element löst den Fehler nicht aus. Der Body-Hintergrund fließt weiterhin über die gesamte Seite. Das Gleiche gilt für den Wertnone.Danke, Sie haben meinen Tag "gerettet" ;)
Ich habe dieses "Feature" schon vor einiger Zeit bemerkt.
Es ist sehr überraschend, wenn man mit Verläufen arbeitet.
Seitdem setze ich immer für mein html eine Höhe von 100 % und overflow: hidden.
http://browsecrosser.free.fr/elements/html/demo.html
Warum kollabiert der Body? Scheint weniger intuitiv.
Wenn es ein Body wie Ihrer wäre, wäre er zu stark, um zusammenzubrechen :D
Hallo Herr Dorian, wann können wir Ihre Füße sehen? Sie zeigen nur 75% Ihres :D
Nun… jetzt habe ich alles auf CSS-TRICKS gesehen…
Seltsam! Gut zu wissen.
SPRENGT MEINEN GEIST
„Sie möchten also den Hintergrund Ihrer Website rot machen, was?“
Setzen Sie den Hintergrund einfach auf das HTML-Element! Problem gelöst.
Artikel, der Zeit spart
Danke. Das wird mir später viel Frust ersparen.
Bei einem solchen Verhalten scheint es, als sollte man zuerst CSS auf das HTML-Element anwenden. Etwas daran fühlt sich für mich nicht richtig an.
Äh? Waren Sie in Kanada unterwegs?
Zustimmung. Das hat mein Problem mit diesem Thema vor ein paar Tagen genau gelöst. Gibt es einen Grund, warum dies nicht die Sache wäre, die Sie
Andere Lösung
html, body { height:100%; }
oder nicht?
html, body { min-height:100%; } wäre wahrscheinlich besser.
Machen Sie es min-height:101%
Wenn Ihre Seite wächst, erhalten Sie sowieso vertikale Scrollbalken – besser, ihr Erscheinen vorher auszulösen. Dies hält Ihr Layout konsistent, wenn Ihre Website Seiten mit unterschiedlichen Längen aufweist.
Alternativ können Sie min-height:100% verwenden und dem Element ein einziges Pixel hinzufügen, z. B. durch Verwendung von Padding. Dies lässt eine kleinere Seite Scrollbalken anzeigen, aber sie wird nicht scrollen.
@Rumpel, Sie können dafür overflow-y:scroll; verwenden. Was viel ordentlicher ist.
@Bennet, das wird nicht funktionieren. Ich bin mir nicht ganz sicher, was der Grund ist, aber der Elternteil muss eine tatsächliche Höhe haben und nicht nur eine Mindesthöhe.
Ich denke, html{height:100%}body{min-height:100%} wäre am logischsten, aber was ich verwende, hängt stark von den Wrappern ab, die ich wirklich brauche.
Seltsamerweise gibt es auch einen IE-Bug beim Setzen von Hintergrundbildern auf dem Body, aber der Bug existiert nicht, wenn sie auf dem HTML-Element gesetzt werden. Also, für alle, die sich fragen, ob es Probleme bei der Verwendung des HTML-Elements gibt, nun… weniger als beim Body-Element ;)
Ich bin kürzlich auf diese Seltsamkeit gestoßen, als ich normalize verwendet habe. Seit diesem Problem deklariere ich meinen Haupt-Hintergrundstil auf dem HTML-Element als vorbeugende Maßnahme auf der Website, die mir Probleme bereitet hat. Gibt es einen Grund, warum dies eine schlechte Idee sein könnte?
Ich habe nie darüber nachgedacht. Ich setze den Hintergrund nur auf das Body-Element und hatte damit nie das geringste Problem. Irgendwie fühlt es sich falsch an, CSS-Eigenschaften auf das HTML-Element anzuwenden. Aber nun, danke für den Hinweis.
Es erscheint tatsächlich etwas seltsam, das HTML-Element zu gestalten. Aber manchmal macht es auch Sinn, z. B. bei der Arbeit mit rems.
DAS ist also passiert mit meinen Demos auf Codepen. Danke fürs Teilen!
Persönlich denke ich, dass das Styling für den Hintergrund auf das HTML-Element gehen sollte, hauptsächlich weil es die erste "Schicht" der Website ist. Ähnlich wie beim Malen/Fotobearbeiten, man beginnt mit einer Leinwand und malt dann sein Bild. Ich denke, das HTML-Element ist wie die Leinwand der Website. Soweit ich weiß, gibt es keine Probleme beim Gestalten des HTML-Elements.
Aber es ist interessant, wie sich die Hintergrundeigenschaften vom BODY auf das HTML-Element übertragen.
Interessant…
Fügen Sie einen andersfarbigen, dicken Rahmen oder Padding auf das HTML und den Body eines Projekts hinzu. Ich stelle fest, dass die meisten Websites-HTMLs den Body nicht wirklich enthalten. Seltsame Ergebnisse treten auf den berühmtesten Websites auf. Ich verwende bei vielen kleineren Websites einen Sticky / gewichteten Footer. Dafür verwende ich html, body { height: 100% } .irgendwas-wrapper { min-height: 100%; } – und Micro Clear Fix auf den Wrappern etc.
Die Divs müssen sich behaupten. Es ist, als ob die Divs alle sagen: "Alter – das ist mein Platz, Mann." Brust geschwellt. Man muss den Dingen wirklich sagen, dass sie sich behaupten und ihre territorialen Grenzen einhalten sollen, damit die Eltern sie richtig umhüllen. Ich scheine heutzutage alles mit einer Mindset-First-Mentalität für kleinste Bildschirme zu schweben. Vielleicht ist das der Grund, warum ich immer wieder auf solche Dinge stoße.
Diese Verhaltensweise gab es schon in IE6 im Standardmodus!
Warum? Parsed als XML können Sie fast jedes Tag auf Ihrer Seite gestalten. (head,title, style, script, … ja, ich lüge nicht) und seitdem war der Body nicht mehr der einzige Teil eines Dokuments, der auf dem Bildschirm sichtbar war, sondern nur ein regulärer Container, der den gesamten Inhalt enthielt.
Nur meine 2 Cent, wenn das hilft zu verstehen, wie es funktioniert.
Aber trotzdem, es ist seltsam zu bemerken, dass HTML den Hintergrund von BODY erben kann ;)
<
pre>head {display:block; /* von daher kann alles im Head mit öffnenden/schließenden Klammern eine display-Regel erhalten, um angezeigt zu werden */}
Ich kann dieses Problem auf codepen.io nicht replizieren… Ich habe versucht, ein Div im Body zu erstellen usw.
W3C [empfiehlt](http://www.w3.org/TR/CSS2/colors.html#background), background-color auf body zu setzen. Es gab einige interessante Diskussionen auf GitHub (#1, #2) bezüglich dieses Problems.
Einfach, aber regt zum Nachdenken an.
Und Entschuldigung, ich verstehe die letzten Zeilen nicht :\ Kann jemand erklären, wie man das behebt?
Schauen Sie, ob ein Hintergrundelement im HTML-Tag vorhanden ist. Wenn ja, entfernen Sie es oder machen Sie den HTML-Hintergrund zu dem, was Sie möchten
Wenn sich jemand fragt, wie Normalize 2.1.1 aussah
https://github.com/necolas/normalize.css/blob/691c71b98518b09a8c83412168a27653c302ef75/normalize.css
Sie alle fangen beim BODY-Element an.
Warum fangen Sie nicht an, vom HTML-Element zu stylen?
Vergessen Sie nicht, dass HTML da ist :) und machen Sie Beispiele damit.
Joe Burns-Referenz gefangen ;)
Ich hatte dieses Problem vor einiger Zeit, seitdem style ich immer zuerst HTML. Ich habe auch html{height:100,1%} verwendet. Danke für die Erklärung.
Ich bin kürzlich auf dieses Problem gestoßen und war so verwirrt! Das ist so seltsam! Ich verstehe jetzt, warum es so ist, da Sie es erklärt haben, aber es ist immer noch eine sehr seltsame Funktion.
@Bennett, ich habe dasselbe gedacht. Danke @Rene für die Klärung!
Das funktioniert für mich einwandfrei
Ich bin froh, dass ich heute auf diesen Beitrag gestoßen bin, als ob er gerade rechtzeitig für das gepostet worden wäre, was ich heute erlebt habe. Ich konnte um nichts in der Welt herausfinden, warum etwas, das immer ohne Probleme funktioniert hat, plötzlich Probleme verursachte.
Ich ziehe es vor, kein CSS in HTML zu verwenden, aber es ist trotzdem eine Lösung.
Es funktioniert für mich, aber für andere – Ist es möglich, ein Bild als Hintergrund hinzuzufügen? Oder Farbe mit Verlauf?
Du bist mein Retter, danke dafür!
Danke dafür. Es hat mich wahnsinnig gemacht.