Körper auf 100% der Browserhöhe bringen

Question

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.

Answer 1

html, body
{
  height: 100%;
  margin: 0;
  padding: 0;
}

Answer 2

Ein kurzes Update

html, body{
    min-height:100%;
    overflow:auto;
}

Eine bessere Lösung mit dem heutigen CSS

html, body{ 
  min-height: 100vh;
  overflow: auto;
}

Answer 3

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.

Answer 4

Sie können bei Bedarf auch JS verwenden

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}

Answer 5

Hier:

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}