<Körper> den gesamten Bildschirm ausfüllen lassen?

129

Ich verwende einen radialen Farbverlauf als Hintergrund auf meiner Webseite, wie folgt:

background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));

Es funktioniert, aber wenn der Inhalt nicht die gesamte Seite ausfüllt, wird der Farbverlauf abgeschnitten. Wie kann ich dafür sorgen, dass das <body>Element immer die gesamte Seite ausfüllt?

html css radial-gradients Ry-
quelle

2

Und body { width: 100%; height: 100%; }funktioniert nicht?

Alex

Das bisschen CSS wird auf das Body-Tag angewendet, oder? Es funktioniert hervorragend für mich in aktuellem Chrome jsfiddle.net/kdjFD/embedded/result . Welchen Browser testen Sie?

LeRoy

4

Nein, body { width: 100%; height: 100%; }funktioniert nicht. Ich denke, ich muss es auch anwenden <html>.

Ry-

Verwenden Sie nicht die alte Webkit-Syntax. Verwenden Sie die offizielle W3C-Syntax

Tim Nguyen

@ TimNguyen: Diese Frage wurde vor drei Jahren gestellt, als es dafür keine Browserunterstützung gab.

Ry-

201

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

Capdragon
quelle

18

Es scheint, dass alles, was es braucht, html { height: 100%; }tatsächlich ist.

Ry-

30

Weder html { height: 100%; }noch body { height: 100%; }genug für mich (Opera als Test eingeschlossen) Was am besten funktionierte, war die html, body { min-height: 100%; }Verwendung von Höhe anstelle von Min-Höhe ließ meinen Hintergrund weiß ohne die Hintergrundfarbe, die angewendet wurde, als ich einige zusammenklappbare Divs in der Mitte meiner Seite erweiterte. min-heightdas behoben.

Stephen P

1

Warum tritt dieses Problem nur bei Verwendung des Hintergrunds auf: linearer Farbverlauf und nicht mit einfachem Hintergrund

ASEN

@ASEN Hast du jemals herausgefunden, warum das so ist?

Spitzen

2

Wenn es immer noch nicht funktioniert, wechseln Sie einfach 100%zu 100vh.

PolymorphismusPrinz

27

Auf unserer Website haben wir Seiten, auf denen der Inhalt statisch ist, und Seiten, auf denen er mit AJAX geladen wird. Auf einer Seite (einer Suchseite) gab es Fälle, in denen die AJAX-Ergebnisse die Seite mehr als ausfüllten, und Fälle, in denen keine Ergebnisse zurückgegeben wurden. Damit das Hintergrundbild in allen Fällen die Seite ausfüllt, mussten wir das folgende CSS anwenden:

html {
   margin: 0px;
   height: 100%;
   width: 100%;
}

body {
   margin: 0px;
   min-height: 100%;
   width: 100%;
}

heightfür die htmlund min-heightfür die body.

jwatts1980
quelle

1

Keiner von ihnen braucht width: 100%;.

Ry-

1

wegen der Anzeige: Block Natur

Valen

auch margin: 0;genug ist , welche Einheit Sie verwenden Null keine Notwendigkeit zu geben

KameeCoding

15

Da keine der anderen Antworten für mich funktionierte, habe ich beschlossen, dies als Antwort für andere zu veröffentlichen, die nach einer Lösung suchen, die ebenfalls das gleiche Problem gefunden hat. Sowohl das HTML als auch der Körper mussten eingestellt werden, min-heightoder der Farbverlauf würde die Körpergröße nicht ausfüllen.

Ich fand Stephen Ps Kommentar , um die richtige Antwort darauf zu geben.

html {
    /* To make use of full height of page*/
    min-height: 100%;
    margin: 0;
}
body {
    min-height: 100%;
    margin: 0;
}

Hintergrundfüllung Körpergröße

Wenn ich die HTML-Höhe (oder die HTML- und Körpergröße) auf 100% eingestellt habe,

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

Hintergrund füllt den Körper nicht

Gemeinschaft
quelle

12

Ich musste 100% sowohl auf HTML als auch auf den Körper anwenden.

htrufan
quelle

4

Versuchen Sie, Maßeinheiten für Ansichtsfenster (vh, vm) auf Körperebene zu verwenden

html, body {margin: 0; Polsterung: 0; } body {min-height: 100vh; }}

Verwenden Sie vh-Einheiten für horizontale Ränder, Auffüllungen und Ränder des Körpers und subtrahieren Sie sie vom Wert für die Mindesthöhe.

Ich habe bizarre Ergebnisse mit vh, vm-Einheiten für Elemente im Körper erzielt, insbesondere bei der Größenänderung.

Mike Wright
quelle

1

Ich denke, der weitgehend richtige Weg ist, CSS auf Folgendes zu setzen:

html
{
    overflow: hidden;
}

body
{
    margin: 0;
    box-sizing: border-box;
}

html, body
{
    height: 100%;
}

Martin Wantke
quelle

Die wichtigen Teile davon sind die gleichen wie die vor sechs Jahren akzeptierte Antwort, sorry.

Ry-

1

Ich habe alle oben genannten Lösungen ausprobiert und diskreditiere keine von ihnen, aber in meinem Fall haben sie nicht funktioniert.

Für mich wurde das Problem verursacht, weil das <header>Tag eine margin-topvon 5em und das <footer>Rand-Bottom von 5em hatte. Ich entfernte sie und legte stattdessen einige padding(oben bzw. unten). Ich bin mir nicht sicher, ob das Ersetzen des Randes eine ideale Lösung für das Problem war, aber der Punkt ist, dass Sie, wenn das erste und das letzte Element in Ihrem <body>Rand einige Ränder haben, möglicherweise einen Blick darauf werfen und diese entfernen möchten.

Meine htmlund bodyTags hatten die folgenden Stile

body {
  line-height: 1;
  min-height: 100%;
  position: relative; }

html {
  min-height: 100%;
  background-color: #3c3c3c; }

Dinika Saxena
quelle

1

Wenn Sie haben eine Grenze oder Polsterung, dann ist die Lösung

html, body {
    margin: 0;
    height: 100%;
}
body {
    border: solid red 5px;
    border-radius: 2em;
}

Erweitern Sie das Snippet

erzeugt das unvollständige Rendering

Um es bei Vorhandensein eines Randes oder einer Polsterung richtig zu machen

Verwenden Sie stattdessen

html, body {
    margin: 0;
    height: 100%;
}
body {
    box-sizing: border-box;
    border: solid red 5px;
    border-radius: 2em;
}

Erweitern Sie das Snippet

wie Martin betonte, obwohl overflow: hiddennicht benötigt wird.

(2018 - getestet mit Chrome 69 und IE 11)

Vrokipal
quelle

Ihre Antwort ist nur für Sie relevant und weil Sie dem bodyTag einen Rahmen hinzugefügt haben . Ohne diesen Rand bodyfüllt das genau 100% des Ansichtsfensters aus. Sie können dies beispielsweise mit einer Hintergrundfarbe sehen. Die richtige Antwort auf diese Frage, die vor 7 Jahren angenommen wurde, ist immer noch gültig.

Niss

-1

Das funktioniert bei mir:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .test{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='test'>Some text</div>
</body>
</html>

GigiProve
quelle

Nicht was die Frage war, sorry. Ich bin froh, dass du etwas gefunden hast, das für dich funktioniert.

Ry-

<Körper> den gesamten Bildschirm ausfüllen lassen?

Antworten: