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.
Ich habe auch andere ausprobiert, aber bei mir hat es nicht funktioniert. Dieser hier hat funktioniert, also kann er eine Lösung für jemanden sein, der ihn braucht. @cimmanon
Ich muss sagen, dass diese Antwort für mich funktioniert, anders als andere Antworten mit hohen Stimmzahlen. overflow: auto Hier wird gezaubert. Btw ich benutze Chrome.
Ich verwende am Anfang von buchstäblich jeder CSS-Datei, die ich verwende, Folgendes:
html, body{
margin: 0;
padding: 0;
min-width: 100%;
width: 100%;
max-width: 100%;
min-height: 100%;
height: 100%;
max-height: 100%;
}Der Rand von 0 stellt sicher, dass die HTML- und BODY-Elemente nicht automatisch vom Browser so positioniert werden, dass sie links oder rechts davon Platz haben.
Das Padding von 0 stellt sicher, dass die HTML- und BODY-Elemente nicht automatisch alles, was sich in ihnen befindet, nach unten oder rechts schieben, weil der Browser dies so vorgibt.
Die Breite und Höhe Varianten sind auf 100% gesetzt, um sicherzustellen, dass der Browser nicht die Größe sie in Erwartung der tatsächlich mit einem Auto-Set Marge oder Polsterung, mit min und max nur für den Fall, dass einige seltsame, unerklärliche Sachen passiert, obwohl Sie wahrscheinlich nicht brauchen sie.
Diese Lösung bedeutet auch, dass Sie, wie ich es tat, als ich vor einigen Jahren mit HTML und CSS anfing, nicht Ihre erste <div> a margin:-8px; damit es in die Ecke des Browserfensters passt.
Bevor ich gepostet habe, habe ich mir mein anderes Vollbild-CSS-Projekt angesehen und festgestellt, dass alles, was ich dort verwendet habe, nur body{margin:0;} und sonst nichts, was in den 2 Jahren, in denen ich daran arbeite, gut funktioniert hat.
Ich hoffe, diese ausführliche Antwort hilft Ihnen, und ich fühle Ihren Schmerz. In meinen Augen ist es dumm, dass die Browser eine unsichtbare Grenze auf der linken und manchmal oberen Seite der body/html-Elemente setzen sollten.
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!
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.
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.
5 Stimmen
CSS3 Viewport-Prozentsatz-Längen