Ich möchte body haben 100% der Browserhöhe. Kann ich das mit CSS erreichen?
Ich habe versucht, die height: 100% aber es funktioniert nicht.
Ich möchte eine Hintergrundfarbe für eine Seite festlegen, die das gesamte Browserfenster ausfüllt, aber wenn die Seite wenig Inhalt hat, erhalte ich einen hässlichen weißen Balken am unteren Rand.
Aber dafür müssen Sie mehr Dinge als nötig hinzufügen, wie z.B. die jQuery-Bibliothek und das Schreiben in JavaScript, während dies in CSS erledigt werden kann.
Die meisten anderen hier veröffentlichten Lösungen werden nicht funktionieren auch in älteren Browsern! Und einige der geposteten Codes werden ein Unangenehmer Überlauf von Text über 100% Höhe in modernen Browsern, bei denen der Text an den Hintergrundfarben vorbeifließt, was ein schlechtes Design ist! Probieren Sie stattdessen bitte meinen Code aus.
Der folgende CSS-Code sollte eine flexible Webseite unterstützen Höheneinstellungen korrekt in allen bekannten Browsern, früher und heute:
html {
height: 100%; /* Fallback CSS for IE 4-6 and older browsers. Note: Without this setting, body below cannot achieve 100% height. */
height: 100vh;/* Overrides 100% height in modern HTML5 browsers and uses the viewport's height. Only works in modern HTML5 browsers */
}
body {
height: auto; /* Allows content to grow beyond the page without overflow */
width: auto; /* Allows content to grow beyond the page without overflow */
min-height: 100%; /* Starts web page with 100% height. Fallback for IE 4-6 and older browsers */
min-height: 100vh;/* Starts web page with 100% height. Uses the viewport's height. Only works in modern HTML5 browsers */
overflow-y: scroll;/* Optional: Adds an empty scrollbar to the right margin in case content grows vertically, creating a scrollbar. Allows for better width calculations, as the browser pre-calculates width before scrollbar appears, avoiding page content shifting.*/
margin: 0;
padding: 0;
background:yellow;/* add text to your page and make sure this background color always fills the screen! */
}ANMERKUNGEN ZUM OBIGEN CODE
In vielen älteren und neueren Browsern, wenn Sie nicht 100% Höhe auf der <html> Selektor, wird der Körper niemals 100% Höhe erreichen! Das ist hier also entscheidend.
Die neuen Ansichtsfenstereinheiten ("vh") sind auf dem body Selektor und nicht notwendig, solange Sie die html Selektor auf eine Höhe von entweder 100% o 100vh . Der Grund dafür ist die body bezieht seine Werte immer aus dem html Elternteil. Die Ausnahme sind einige sehr alte Browser aus der Vergangenheit, so dass es am besten ist, einen Höhenwert für den Körper festzulegen.
Einige moderne Browser, die die body Selektor weiß nicht, wie er die Höhe des Ansichtsfensters direkt erben kann. Also noch einmal, setzen Sie immer Ihre html Selektor auf 100% Höhe! Sie können weiterhin "vh"-Einheiten verwenden in body zur Umgehung des übergeordneten html Wert und erhalten seine Eigenschaft Dimensionen direkt aus dem Viewport in den meisten modernen Browsern, jedoch. Aber auch hier gilt, dass es optional ist, wenn die übergeordnete oder Root html Selektor hat 100% Höhe, die body wird immer korrekt vererbt.
Beachten Sie, dass ich die Option body zu height:auto , nicht height:100% . Dies führt zum Zusammenbruch der body Element um den Inhalt herum, damit es mit dem Inhalt wachsen kann. Sie wollen NICHT einstellen body height y width zu 100% oder bestimmte Werte da dies den Inhalt auf die vertikalen Dimensionen des Körpers beschränkt. Immer wenn Sie body height:100% Sobald sich der Inhaltstext über die Höhe des Browsers hinaus bewegt, überläuft er den Container und damit alle Hintergründe, die der ursprünglichen Höhe des Ansichtsfensters zugeordnet sind, was zu einem hässlichen Bild führt! height:auto ist Ihr bester Freund in CSS!
Aber Sie wollen doch, dass der Körper standardmäßig 100 % Höhe hat, oder? Das ist der Punkt, an dem min-height:100% wirkt wahre Wunder! Es ermöglicht nicht nur, dass Ihr body-Element standardmäßig eine Höhe von 100% hat, sondern dies funktioniert auch in den ältesten Browsern! Aber das Beste von allem ist, dass Ihr Hintergrund 100 % ausfüllen kann und sich dennoch weiter nach unten erstreckt, wenn der Inhalt mit height:auto vertikal wächst.
Verwendung von overflow:auto Eigenschaften werden nicht benötigt, wenn Sie die height:auto über die body . Damit wird die Seite angewiesen, den Inhalt auf jede beliebige Höhe auszudehnen, auch über die Höhe des Ansichtsfensters hinaus, wenn dies erforderlich ist und der Inhalt länger wird als die Seitenanzeige des Ansichtsfensters. Es wird nicht aus dem body Abmessungen. Und es ermöglicht das Scrollen nach Bedarf. overflow-y:scroll ermöglicht es Ihnen, eine leere Bildlaufleiste rechts vom Seiteninhalt hinzuzufügen, die standardmäßig in jedem Webbrowser vorhanden ist. Die Bildlaufleiste erscheint nur dann innerhalb des Bildlaufleistenbereichs, wenn der Inhalt über 100% der Höhe des Ansichtsfensters hinausgeht. Auf diese Weise werden die Seitenbreite und etwaige Ränder oder Abstände vom Browser im Voraus berechnet und verhindern, dass sich die Seiten verschieben, wenn die Benutzer Seiten mit und ohne Bildlauf sehen. Ich wende diesen Trick häufig an, da er die Seitenbreite für alle Szenarien perfekt festlegt und Ihre Webseiten sich nie verschieben und blitzschnell laden!
Ich glaube height:auto ist der Standard bei body in den meisten UA-Browser-Stilvorlagen. Die meisten Browser nehmen diesen Wert also ohnehin standardmäßig an.
Hinzufügen von min-height:100% gibt Ihnen die gewünschte Standardhöhe body zu haben, und ermöglicht dann, dass die Seitenabmessungen das Ansichtsfenster ausfüllen, ohne dass der Inhalt aus dem Körper ausbricht. Dies funktioniert nur, weil html hat seine 100%ige Höhe auf der Grundlage des Ansichtsfensters abgeleitet.
Die beiden KRITISCHEN Teile hier sind nicht die Einheiten, wie % o vh aber stellen Sie sicher, dass das Root-Element, oder html wird auf 100 % der Höhe des Ansichtsfensters gesetzt. Zweitens ist es wichtig, dass der Körper eine min-height:100% o min-height:100vh so dass es zunächst die Höhe des Ansichtsfensters ausfüllt, was immer das auch sein mag. Darüber hinaus wird nichts weiter benötigt.
STYLING-HÖHE FÜR LEGACY-BROWSER
Beachten Sie, dass ich "Fallback"-Eigenschaften hinzugefügt habe für height y min-height da viele Browser vor 2010 keine "vh"-Viewport-Einheiten unterstützen. Es macht Spaß, so zu tun, als ob jeder in der Webwelt das Neueste und Beste verwendet, aber die Realität ist, dass viele Legacy-Browser noch heute in großen Unternehmensnetzwerken im Einsatz sind und viele noch veraltete Browser verwenden, die diese neuen Einheiten nicht verstehen. Eines der Dinge, die wir vergessen, ist, dass viele sehr alte Browser nicht wissen, wie sie die Höhe des Ansichtsfensters korrekt ausfüllen können. Traurigerweise mussten diese alten Browser einfach mit height:100% sowohl auf der html Element und das Element body da sie standardmäßig beide in der Höhe zusammengeschoben werden. Wenn Sie das nicht taten, würden Browser-Hintergrundfarben und andere seltsame visuelle Elemente unter dem Inhalt auftauchen, der das Ansichtsfenster nicht ausfüllte. Das obige Beispiel sollte all dies für Sie lösen und auch in neueren Browsern funktionieren.
Vor den modernen HTML5-Browsern (nach 2010) haben wir das gelöst, indem wir einfach die height:100% sowohl auf der html y body Selektoren, oder einfach min-height:100% über die body . Beide Lösungen ermöglichen es, dass der obige Code in mehr als 20 Jahren alten Webbrowsern funktioniert und nicht nur in einigen wenigen, die in den letzten Jahren entwickelt wurden. In alten Netscape 4-Serien oder IE 4-5, mit min-height:100% anstelle von height:100% auf dem Body-Selektor könnte immer noch dazu führen, dass die Höhe in diesen sehr alten Browsern kollabiert und der Text die Hintergrundfarben überfließt. Aber das wäre das einzige Problem, das ich bei dieser Lösung sehen könnte.
Mit meiner CSS-Lösung können Sie Ihre Website in 99,99 % aller Browser korrekt anzeigen lassen, sowohl in der Vergangenheit als auch in der Gegenwart. und nicht nur 60-80 % der in den letzten Jahren gebauten Browser.
Viel Glück!
Wenn Sie sich die Arbeit ersparen wollen, Ihre eigene CSS-Datei zu bearbeiten und die Höhenregeln selbst zu definieren, lösen die meisten CSS-Frameworks auch dieses Problem mit dem Body-Element, das unter anderem die gesamte Seite ausfüllt, und zwar problemlos bei mehreren Größen von Viewports.
Zum Beispiel, Stillschweigend Das CSS-Framework löst dieses Problem von vornherein, indem Sie keine CSS-Regeln und -Klassen definieren müssen und einfach die CSS-Datei in Ihr HTML einfügen.
Bitte überprüfen Sie dies:
* {margin: 0; padding: 0;}
html, body { width: 100%; height: 100%;}Oder versuchen Sie eine neue Methode Viewport height :
html, body { width: 100vw; height: 100vh;}Ansichtsfenster: Wenn Sie Viewport verwenden, bedeutet das, dass der Inhalt des Bildschirms in voller Höhe auf dem Bildschirm angezeigt wird.
Bitte fügen Sie eine Erklärung Ihrer Lösung bei, damit andere, die diese Antwort finden, sie verstehen können. Danke!
Könnten Sie bitte erklären, was der mögliche Zweck von width: 100% für die Elemente body und html?
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
4 Stimmen
CSS3 Viewport-Prozentsatz-Längen