HTML/CSS: Warum dehnt sich der Körper nicht auf seinen Inhalt aus?

Nehmen Sie dieses triviale Beispiel, und öffnen Sie es:HTML/CSS: Warum dehnt sich der Körper nicht auf seinen Inhalt aus?

<html> 
    <body style="background-image:url(http://upload.wikimedia.org/wikipedia/commons/2/21/Mandel_zoom_00_mandelbrot_set.jpg);background-repeat: no-repeat; background-position: top center;"> 
     <div style="width: 8000px; border: 3px solid red;">Demo</div> 
    </body> 
</html>

Die Seite gemacht wird, so dass der Körper ein Top-zentrierte Hintergrundbild und ein enthalten Element, das Fenstergrenzen überläuft, so gibt es horizontale Scrollen ist (falls Sie eine haben Monitor breiter als 8000px dann bist du wirklich cool, bitte mach das Fenster kleiner und erfrische).

Das Problem ist, aus irgendeinem Grund, dass die <body> nicht die <div> enthalten nicht dehnen. Es bleibt nur die gleiche Breite wie das Ansichtsfenster und der <div> überläuft es. Dadurch wird der Hintergrund an der falschen Stelle zentriert und auf die Größe des Ansichtsfensters zugeschnitten. Ziemlich hässlich, wenn Sie nach rechts scrollen.

Ich habe bereits eine Lösung für dieses Problem gefunden, aber ich frage mich WARUM das ist so? Es scheint auch in allen Browsern konsistent zu sein. Aber meiner Meinung nach ist das ziemlich kontraintuitiv und grundsätzlich einfach falsch. Das Containerelement sollte groß genug sein, um die Kinder aufzunehmen - es sei denn, sie sind absolut positioniert. In diesem Fall nehmen sie nicht an den Layoutberechnungen teil.

Quelle

2010-01-29 Vilx-

Hey. Zurück zu diesem 2 Jahre später, und bin auf der Suche nach der gleichen Lösung, die Sie sagen, dass Sie gefunden haben. Bobinces Antwort hilft nicht sehr, sehr .. (Ist Float die einzige Option?) – SoreThumb

Ich benutze immer noch float. Schau es dir hier an: http://www.drowtales.com –

Blöcke strecken sich einfach nicht horizontal, um ihren Kindinhalt überhaupt aufzunehmen; nie haben. (1) Das ist etwas, was nur in der vertikalen Achse passiert. (2) Logischerweise können beide Dimensionen nicht dehnbar sein; man muss repariert werden (gegen Eltern). In CSS wird die Breite eines Blockelements im normalen Fluss ausschließlich vom übergeordneten Element abgeleitet (minus Padding, Ränder, Rahmen), und dann folgt die Höhe, um zu sehen, wie viel Inhalt Sie in die Breite des Blocks einfügen und fließen lassen können .

Das Hintergrundbild in einer unübersichtlichen Stelle gesetzt werden, die Sie zu dem, was verleitet tatsächlich wegen this quirk von CSS passiert:

Für Dokumente, deren Wurzelelement ist ein HTML „HTML“ Element oder ein XHTML „html "Element, das die Werte 'transparent' für 'Hintergrundfarbe' und 'keine' für 'Hintergrundbild' berechnet hat, müssen Benutzeragenten stattdessen den berechneten Wert der Hintergrundeigenschaften aus dem ersten HTML-Element" BODY "dieses Elements oder XHTML verwenden "body" -Element Kind beim Malen von Hintergründen für die Leinwand und darf keinen Hintergrund für dieses Kindelement zeichnen. Solche Hintergründe müssen auch am selben Punkt verankert sein, wie sie wären, wenn sie nur für das Wurzelelement gemalt wären.

Dies ist ein gemeiner Hack in Kraft gesetzt, weil die Menschen zu setzen Hintergründe auf ‚Körper‘ verwendet wurden, und nachdem er das Ansichtsfenster füllen, auch wenn das <body> Element selbst nicht das Ansichtsfenster darstellt.

(1) außer in einigen speziellen Fällen, wie float und position: absolute Elemente ohne eine deklarierte width.

(2) es sei denn, Sie stoppen dies absichtlich, indem Sie height/overflow setzen.

Quelle

2010-01-29 11:11:54 bobince

Ich war dabei, genau die gleiche Antwort zu schreiben, aber ohne das Zitat aus der CSS-Spezifikation. +1 – Boldewyn

Die Ausnahme zum Expandieren ist das Ansichtsfenster. Nichts erweitert den Darstellungsbereich, es sei denn, seine direkten oder angehängten Inhalte erfordern dies - dies schließt die Elemente div und table ein (z. B. display: table-cell on body) -, aber keinen Blockcontainer.

Quelle

2010-01-29 11:05:49 Anonymous

HTML/CSS: Warum dehnt sich der Körper nicht auf seinen Inhalt aus?

Antwort

Verwandte Themen