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

Versuchen Sie auch, die Höhe des html-Elements auf 100% zu setzen.

html, 
body {
    height: 100%;
}

Body orientiert sich bei der Skalierung der dynamischen Eigenschaft an seinem übergeordneten Element (HTML), so dass auch die Höhe des HTML-Elements festgelegt werden muss.

Der Inhalt des Textkörpers wird sich jedoch wahrscheinlich dynamisch ändern müssen. Wenn Sie die Mindesthöhe auf 100 % setzen, können Sie dieses Ziel erreichen.

html {
  height: 100%;
}
body {
  min-height: 100%;
}

Answer 2

Als Alternative zur Einstellung der beiden html y body die Höhen des Elements auf 100% können Sie auch die prozentuale Länge des Ansichtsfensters verwenden.

5.1.2. Prozentuale Länge des Bildausschnitts: die Einheiten "vw", "vh", "vmin", "vmax

Die prozentualen Längen der Ansichtsfenster beziehen sich auf die Größe des ursprünglich enthaltenen Blocks. Wenn die Höhe oder Breite des anfänglich enthaltenen Blocks geändert wird, werden sie entsprechend skaliert.

In diesem Fall könnten Sie den Wert 100vh - die die Höhe des Ansichtsfensters ist.

Beispiel hier

body {
  height: 100vh;
  padding: 0;
}

body {
  min-height: 100vh;
  padding: 0;
}

Dies wird von den meisten modernen Browsern unterstützt. Unterstützung finden Sie hier .

Answer 3

Wenn Sie ein Hintergrundbild haben, sollten Sie dieses stattdessen einstellen:

html{
  height: 100%;
}
body {
  min-height: 100%;
}

Dadurch wird sichergestellt, dass Ihr body-Tag weiter wachsen kann, wenn der Inhalt größer als der Viewport ist, und dass das Hintergrundbild weiter wiederholt/gerollt/was auch immer wird, wenn Sie anfangen, nach unten zu scrollen.

Denken Sie daran, dass Sie, wenn Sie IE6 unterstützen müssen, einen Weg finden müssen, die height:100% für Körper, IE6 behandelt height wie min-height sowieso.

Answer 4

Wenn Sie die Ränder des Textkörpers beibehalten möchten und keine Bildlaufleisten wünschen, verwenden Sie die folgende CSS-Datei:

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

Einstellung body {min-height:100%} erhalten Sie Bildlaufleisten.

Siehe Demo unter http://jsbin.com/aCaDahEK/2/edit?html,output .

Answer 5

Nachdem ich verschiedene Szenarien getestet habe, glaube ich, dass dies die beste Lösung ist:

html {
    width: 100%;
    height: 100%;
    display: table;
}

body {
    width: 100%;
    display: table-cell;
}

html, body {
    margin: 0;
    padding: 0;
}

Sie ist insofern dynamisch, als die html und die body Elemente werden automatisch erweitert, wenn ihr Inhalt überläuft. Ich habe dies in der neuesten Version von Firefox, Chrome und IE 11 getestet.

Sehen Sie die vollständige fiddle hier (für Sie Tabelle Hasser da draußen, können Sie immer ändern, um es zu einem div verwenden):

https://jsfiddle.net/71yp4rh1/9/

---

In diesem Zusammenhang gibt es mehrere Probleme mit den hier veröffentlichten Antworten .

html, body {
    height: 100%;
}

Die Verwendung des obigen CSS bewirkt, dass das html- und das body-Element NICHT automatisch erweitert werden, wenn ihr Inhalt wie hier gezeigt überläuft:

https://jsfiddle.net/9vyy620m/4/

Achten Sie beim Scrollen auf den sich wiederholenden Hintergrund? Dies geschieht, weil sich die Höhe des body-Elements NICHT erhöht hat, weil die untergeordnete Tabelle überläuft. Warum vergrößert es sich nicht wie jedes andere Blockelement? Ich bin mir nicht sicher. Ich denke, dass die Browser dies falsch handhaben.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Die Einstellung einer Mindesthöhe von 100 % für den Körper, wie oben gezeigt, führt zu anderen Problemen. Wenn Sie dies tun, können Sie nicht angeben, dass ein untergeordnetes Div oder eine Tabelle eine prozentuale Höhe einnimmt, wie hier gezeigt:

https://jsfiddle.net/aq74v2v7/4/

Ich hoffe, das hilft jemandem. Ich denke, dass die Browser dies falsch handhaben. Ich würde erwarten, dass die Höhe des Körpers automatisch größer wird, wenn seine Kinder überlaufen. Allerdings scheint das nicht zu passieren, wenn Sie 100% Höhe und 100% Breite verwenden.