Faire que <body> remplisse tout l'écran?

129

J'utilise un dégradé radial comme arrière-plan sur ma page Web, comme ceci:

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

Cela fonctionne, mais lorsque le contenu ne remplit pas toute la page, le dégradé est coupé. Comment puis-je faire en sorte que l' <body>élément remplisse toujours toute la page?

html css radial-gradients

— Ry-
source

2

Et body { width: 100%; height: 100%; }ça ne marche pas?

— Alex

Ce morceau de CSS est appliqué à la balise body, n'est-ce pas? Cela fonctionne très bien pour moi dans Chrome jsfiddle.net/kdjFD/embedded/result à jour . Quel navigateur testez-vous?

— LeRoy

4

Non, body { width: 100%; height: 100%; }ça ne marche pas. Je suppose que je dois aussi l'appliquer <html>.

— Ry-

N'utilisez pas l'ancienne syntaxe -webkit-. Utilisez la syntaxe officielle du W3C

— Tim Nguyen

@TimNguyen: Cette question a été posée il y a trois ans, alors qu'il n'y avait pas de support de navigateur pour cela.

— Ry-

201

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

— capdragon
source

18

Il semble que tout ce qu'il faut, c'est en html { height: 100%; }fait.

— Ry-

30

Ni html { height: 100%; }ni body { height: 100%; }n'était suffisant pour moi (Opera inclus comme test) Ce qui fonctionnait le mieux était d' html, body { min-height: 100%; }utiliser la hauteur au lieu de la hauteur min. Mon arrière-plan était blanc sans la couleur d'arrière-plan appliquée lorsque j'ai développé des divs pliables au milieu de ma page. min-heightcorrigé cela.

— Stephen P

1

Pourquoi ce problème se produit-il uniquement lors de l'utilisation de l'arrière-plan: dégradé linéaire et non avec un arrière

— ASEN

@ASEN Avez-vous déjà compris pourquoi?

— dentelle

2

Si cela ne fonctionne toujours pas pour quiconque, passez simplement 100%à 100vh.

— PolymorphismPrince

27

Sur notre site, nous avons des pages où le contenu est statique et des pages où il est chargé avec AJAX. Sur une page (une page de recherche), il y avait des cas où les résultats AJAX remplissaient plus que la page, et des cas où il ne renverrait aucun résultat. Pour que l'image d'arrière-plan remplisse la page dans tous les cas, nous avons dû appliquer le CSS suivant:

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

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

heightpour le htmlet min-heightpour le body.

— jwatts1980
source

1

Aucun d'eux n'en a besoin width: 100%;.

— Ry-

1

à cause de l'affichage: block nature

— Valen

margin: 0;est également suffisant, pas besoin de spécifier de quelle unité vous utilisez zéro

— KameeCoding

15

Comme aucune des autres réponses n'a fonctionné pour moi, j'ai décidé de poster ceci comme une réponse pour les autres à la recherche d'une solution qui ont également trouvé le même problème. Le html et le corps devaient être définis avec min-heightou le dégradé ne remplirait pas la hauteur du corps.

J'ai trouvé que le commentaire de Stephen P fournissait la bonne réponse à cela.

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

hauteur du corps de remplissage de fond

Lorsque la hauteur html (ou html et body) est réglée à 100%,

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

le fond ne remplit pas le corps

— Communauté
source

12

J'ai dû appliquer 100% à la fois au html et au corps.

— htrufan
source

4

Essayez d'utiliser les unités de mesure de la fenêtre d'affichage (vh, vm) au niveau du corps

html, corps {marge: 0; rembourrage: 0; } corps {hauteur min: 100vh; }

Utilisez les unités vh pour les marges horizontales, les rembourrages et les bordures sur le corps et soustrayez-les de la valeur de hauteur min.

J'ai eu des résultats bizarres en utilisant des unités vh, vm sur des éléments dans le corps, en particulier lors du redimensionnement.

— Mike Wright
source

1

Je pense que la manière en grande partie correcte est de définir le CSS sur ceci:

html
{
    overflow: hidden;
}

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

html, body
{
    height: 100%;
}

— Martin Wantke
source

Les parties importantes de ceci sont les mêmes que la réponse acceptée il y a six ans, désolé.

— Ry-

1

J'ai essayé toutes les solutions ci-dessus et je ne discrédite aucune d'entre elles, mais dans mon cas, elles n'ont pas fonctionné.

Pour moi, le problème était dû au fait que la <header>balise avait une valeur margin-topde 5em et <footer>une marge inférieure de 5em. Je les ai supprimés et en ai mis à la place padding(respectivement en haut et en bas). Je ne sais pas si le remplacement de la marge était une solution idéale au problème, mais le fait est que, si les premier et dernier éléments de votre<body> ont des marges, vous voudrez peut-être l'examiner et les supprimer.

Mes balises htmlet bodyavaient les styles suivants

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

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

— dinika saxena
source

1

Si vous avez une bordure ou un rembourrage, la solution

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

Développer l'extrait

produit le rendu imparfait

Pour bien faire les choses en présence d'une bordure ou d'un rembourrage

utiliser à la place

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

Développer l'extrait

comme Martin l'a souligné, bien que ce overflow: hiddenne soit pas nécessaire.

(2018 - testé avec Chrome 69 et IE 11)

— Vrokipal
source

Votre réponse n'est pertinente que pour vous, et parce que vous avez ajouté une bordure à la bodybalise. Sans cette bordure, le bodyremplira exactement 100% de la fenêtre, vous pouvez le voir avec une couleur d'arrière-plan par exemple. La bonne réponse à cette question a été acceptée il y a 7 ans est toujours valable.

— Niss

-1

Cela fonctionne pour moi:

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

Pas quelle était la question, désolé. Heureux que vous ayez trouvé quelque chose qui fonctionne pour vous.

— Ry-