Far <body> riempire l'intero schermo?

129

Sto usando un gradiente radiale come sfondo sulla mia pagina web, in questo modo:

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

Funziona, ma quando il contenuto non riempie l'intera pagina il gradiente viene tagliato. Come posso fare in modo che l' <body>elemento riempia l'intera pagina, sempre?

html css radial-gradients

— Ry-
fonte

2

E body { width: 100%; height: 100%; }non funziona?

— Alex,

Quel pezzetto di CSS è applicato al tag body giusto? Funziona benissimo per me in Chrome aggiornato jsfiddle.net/kdjFD/embedded/result . Quale browser stai testando?

— LeRoy,

4

No, body { width: 100%; height: 100%; }non funziona. Immagino di doverlo applicare anche a <html>.

— Ry-

Non usare la vecchia sintassi -webkit-. Usa la sintassi W3C ufficiale

— Tim Nguyen

@TimNguyen: questa domanda è stata posta tre anni fa, quando non esisteva il supporto del browser.

— Ry-

201

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

— capdragon
fonte

18

Sembra che in html { height: 100%; }realtà tutto ciò che serve è .

— Ry-

30

Né html { height: 100%; }, né body { height: 100%; }è stato sufficiente per me (Opera incluso come test) che cosa ha funzionato meglio dovevahtml, body { min-height: 100%; } utilizzando l'altezza invece di min-height lasciato il mio sfondo bianco w / o il background-color applicata quando ho ampliato alcuni div comprimibili nel bel mezzo della mia pagina. min-heightrisolto quello.

— Stephen P

1

Perché questo problema si verifica solo quando si utilizza lo sfondo: gradiente lineare e non con sfondo semplice

— ASEN

@ASEN Hai mai capito perché?

— pizzo

2

Se non funziona ancora per nessuno, 100%passa a 100vh.

— Polimorfismo

27

Sul nostro sito abbiamo pagine in cui il contenuto è statico e pagine in cui è caricato con AJAX. Su una pagina (una pagina di ricerca), ci sono stati casi in cui i risultati AJAX avrebbero più che riempito la pagina e casi in cui non avrebbe restituito risultati. Affinché l'immagine di sfondo riempia la pagina in tutti i casi abbiamo dovuto applicare il seguente CSS:

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

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

heightper il htmle min-heightper il body.

— jwatts1980
fonte

1

Nessuno dei due ha bisogno width: 100%;.

— Ry-

1

a causa della visualizzazione: blocco natura

— Valen

inoltre margin: 0;è sufficiente, non è necessario specificare l'unità di cui si utilizza zero

— KameeCoding

15

Poiché nessuna delle altre risposte ha funzionato per me, ho deciso di pubblicare questo come una risposta per gli altri in cerca di una soluzione che trovasse lo stesso problema. Bisognava impostare sia l'html che il bodymin-height o il gradiente non riempiva l'altezza del corpo.

Ho trovato il commento di Stephen P per fornire la risposta corretta a questo.

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

altezza del corpo di riempimento dello sfondo

Quando ho l'altezza html (o html e body) impostata al 100%,

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

lo sfondo non riempie il corpo

— Comunità
fonte

12

Ho dovuto applicare il 100% sia a html che a body.

— htrufan
fonte

4

Prova a utilizzare le unità di misura viewport (vh, vm) a livello del corpo

html, body {margine: 0; imbottitura: 0; } body {altezza minima: 100 vh; }

Usa le unità vh per margini orizzontali, imbottiture e bordi sul corpo e sottrale dal valore di altezza minima.

Ho avuto risultati bizzarri usando le unità vh, vm su elementi all'interno del corpo, specialmente durante il ridimensionamento.

— Mike Wright
fonte

1

Penso che il modo in gran parte corretto, è quello di impostare CSS su questo:

html
{
    overflow: hidden;
}

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

html, body
{
    height: 100%;
}

— Martin Wantke
fonte

Le parti importanti di questo sono le stesse della risposta accettata sei anni fa, scusa.

— Ry-

1

Ho provato tutte le soluzioni sopra e non scredito nessuna di esse, ma nel mio caso non hanno funzionato.

Per me, il problema è stato causato dal fatto che il <header>tag aveva un margin-top5em e <footer>aveva un margine inferiore di 5em. Li ho rimossi e invece ne ho messi alcuni padding(rispettivamente in alto e in basso). Non sono sicuro che la sostituzione del margine sia stata una soluzione ideale al problema, ma il punto è che, se il primo e l'ultimo elemento nel tuo<body> margine ha dei margini, potresti volerlo esaminare e rimuoverli.

My htmle bodytag avevano i seguenti stili

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

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

— Dinika Saxena
fonte

1

Se si dispone di un bordo o padding, allora la soluzione

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

Espandi frammento

produce un rendering imperfetto

Per farlo bene in presenza di un bordo o un'imbottitura

usa invece

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

Espandi frammento

come ha sottolineato Martin , sebbeneoverflow: hidden non è necessario.

(2018 - testato con Chrome 69 e IE 11)

— Vrokipal
fonte

La tua risposta è pertinente solo per te e perché hai aggiunto un bordo al bodytag. Senza quel bordo, bodyriempirà esattamente il 100% della finestra, ad esempio puoi vederlo con un colore di sfondo. La risposta corretta a questa domanda è stata accettata 7 anni fa è ancora valida.

— Niss,

-1

Questo funziona per me:

<!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
fonte

Non era la domanda, scusa. Sono contento di aver trovato qualcosa che funziona per te.

— Ry-