Das <html>-Element ist das oberste Element auf jeder Webseite. Jedes andere Element befindet sich darin. Wenn Sie eine Seite mit fließender Breite erstellen, aber die maximale Breite, auf die sie erweitert werden kann, begrenzen möchten (eine gute Idee), können Sie dies ganz einfach tun, indem Sie dem html-Element buchstäblich eine max-width zuweisen.
html {
max-width: 1200px;
}Nichts wird auf natürliche Weise breiter als das, es sei denn, es wird explizit erzwungen. Sie können sogar die Dinge zentriert halten.
html {
max-width: 1200px;
margin: 0 auto;
}Aber was ist mit dem Hintergrund? Wird er jetzt an den Rändern abgeschnitten, wenn Sie breiter gehen? Nein. Das html-Element ist in dieser Hinsicht einzigartig, und der Hintergrund füllt die Seite, unabhängig davon, ob Sie ihn kleiner machen.
html {
max-width: 1200px;
margin: 0 auto;
background: #eee; /* Fills the page */
}Noch eine etwas seltsame Sache… obwohl das HTML-Element seine neue Größe berücksichtigt und das oberste Element ist, sind absolut positionierte Elemente immer noch relativ zum Browserfenster und nicht zum html-Element, es sei denn, Sie setzen die position-Eigenschaft auf relative.
html {
max-width: 1200px;
margin: 0 auto;
background: #eee; /* Fills the page */
position: relative; /* Fix for absolute positioning */
}Funktioniert in allen gängigen Browsern plus IE 8+. IE6 & 7 lassen das html-Element einfach volle Breite, was nicht das Ende der Welt ist.
Vielen Dank an Kit MacAllister für die Einsendung dazu.
Werden fest positionierte Elemente nicht auch relativ zum Browser sein?
Leider hat Webkit einen großen Fehler beim Runden von Pixelwerten von Prozentwerten, und es ist gefährlich, es für das Layout zu verwenden
Ich setze normalerweise stattdessen max-width auf dem body. Auf diese Weise kann ich, wenn ich möchte, separate Hintergründe für den Viewport und die Seite selbst haben. Nicht immer eine Überlegung wert, aber man weiß ja nie. Ich bin auch wohler dabei, die Breite auf dem body statt auf dem html-Element festzulegen, was die Browserkompatibilität angeht, aber ich kenne keine Fehler, die diese Bedenken untermauern. :)
Dito
Während ich den Wunsch schätze, meine Markup auf das absolut semantisch minimale Tag-Anzahl zu reduzieren, sollte der letzte Satz vielleicht lauten:
IE6 & 7 lassen das html-Element einfach volle Breite, sodass Sie stattdessen eine Wrapper-Div verwenden könnten, was nicht das Ende der Welt ist.
Oder Sie können stattdessen das Element verwenden, ohne ein weiteres div hinzufügen zu müssen.
Aber eine Anmerkung zur Verwendung, wenn Sie es auf einer Website mit RTL-Styling verwenden: Es funktioniert in IE6 & 7 nicht richtig, selbst mit korrekten lang- & dir-Attributen. In diesem Fall müssen Sie eine Wrapper-Div verwenden. Ich habe es noch nicht versucht, um zu wissen, ob es mit RTL richtig funktioniert oder nicht.
Kent, Sie haben Recht. Dieser Beitrag enthält ein paar falsche Details.
Ein Hintergrund wird immer auf die Leinwand übertragen, wenn er sich auf dem Wurzelelement befindet (außer bei einigen seltsamen Fällen im Zusammenhang mit dem Verhalten von background-attachment). Die Leinwand malt auch den Hintergrund des BODY, wenn HTML keinen explizit eingestellten Hintergrund hat. Absolut positionierte Elemente mit nicht positionierten Vorfahren werden relativ zur ICB und nicht zum Fenster/Viewport positioniert. Wenn sie am Viewport verankert wären, wären sie fixiert.
Dies sind vielleicht die am meisten missverstandenen Konzepte in CSS.
Laut CSS2.1 Initial Containing Block ist der De-facto-Wert der Viewport: „Für kontinuierliche Medien hat er die Abmessungen des Viewports und ist am Leinwandursprung verankert; er ist der Seitenbereich für seitenbasierte Medien.“
ICB? Ice Cold Beer? Italian Cheese Bread? Oh… Initial Containing Block. ;) Das ist keine Abkürzung, die ich jeden Tag höre. :)
Danke Josiah!
Verflixte Abkürzungen…
Es ist erwähnenswert, dass es neben max-width auch einen min-width-Parameter gibt. IE6&7 behandeln beide als width-Eigenschaft.
IE FIX
Das habe ich online gefunden. Es zeigt eine JavaScript-Korrektur für ältere IE, um min- und max-Breite zu emulieren.
— http://javascript.about.com/library/blwidth.htm
Wunderbare Tricks Chris!
Das besondere Verhalten des html und des Hintergrunds kannte ich nicht! Ziemlich nett ;)
Ich mache das gerade für das Element und füge auch eine min-Breite hinzu. Gibt es wesentliche Vorteile, dies auf dem Element statt auf dem zu tun?
Ups, das sollte heißen… verwende das derzeit auf dem BODY-Element. Gibt es wesentliche Vorteile bei der Verwendung des HTML-Elements gegenüber dem BODY-Element?
Gleiche Frage. Gibt es einen Grund, es nicht auf body anzuwenden?
Aber was, wenn ich möchte, dass die Hintergründe von Header oder Footer die Bildschirmbreite ausfüllen (aber jeweils mit einem enthaltenden Element, das ihnen eine min-Breite gibt)? Werden diese dann abgeschnitten? Oder ist das eine bessere Lösung, als ein enthaltendes Div innerhalb dieser Elemente zu haben?
Hmm, ich denke, eine .wrapper-Klasse mit den auf dieser Seite beschriebenen max-width-Eigenschaften wäre die perfekte Lösung. Sie könnte dann zum Header/Footer-Bereich der Website hinzugefügt werden, während ihr Elternteil gedehnte Hintergründe haben könnte.
Ich würde vorschlagen, dass Sie es, wenn Sie es verwenden, auf dem body-Tag oder einem zusätzlichen Wrapper innerhalb des body-Tags verwenden. Ich sehe keinen Vorteil darin, es auf dem html-Tag zu verwenden.
Ich bin der Meinung, dass das html-Element niemals gestylt oder berücksichtigt werden sollte.
Selbst der Body.
Mit einem Wrapper zu beginnen ist viel flexibler!
Ich stimme Ihnen zu Tof.
Es ist eine Art semantische Diskussion (style das HTML oder Body oder keins davon).
Schön, aber für mich ist #wrapper auch die einfachste Lösung.
In der CSS2-Spezifikation von w3c steht, dass absolut/relativ positionierte Elemente relativ zum nächsten übergeordneten Element positioniert werden, dessen Position entweder absolut oder relativ ist. Es ist also kein „seltsames“ Verhalten, sondern tatsächlich das richtige (spezifizierte) Verhalten.
;)
Noch eine Stimme für das Styling eines Wrappers.