Assurez - <body> remplir tout l'écran?

Je suis en utilisant un dégradé radial comme arrière-plan sur ma page, comme ceci:

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

Il fonctionne, mais quand le contenu n'est pas de remplir la page entière le gradient est coupée. Comment puis-je faire la <body> élément de remplir la totalité de la page, toujours?

Et body { width: 100%; height: 100%; } ne fonctionne pas?
Que peu de css est appliqué à la balise body droite? Il fonctionne très bien pour moi la mise à jour de Chrome jsfiddle.net/kdjFD/embedded/result . Quel navigateur êtes-vous tester?
Non, body { width: 100%; height: 100%; } ne fonctionne pas. Je suppose que je dois l'appliquer à <html> trop.
Ne pas utiliser le vieux -webkit - syntaxe. Utiliser la langue officielle du W3C syntaxe
Cette question a été posée il y a trois ans, quand il n'y a pas de prise en charge du navigateur pour que.
connexes: stackoverflow.com/a/48503609/8620333 .. assez vieux comme question, mais je ne vois pas vraiment une réponse expliquant le contexte de propagation de l'astuce et pourquoi vous avez seulement besoin html{height:100%}

InformationsquelleAutor Ry- | 2011-04-19

177
```
html, body {
    margin: 0;
    height: 100%;
}
```
- Il semble que tout ce qu'il faut est html { height: 100%; } en fait.
- Ni html { height: 100%; } ni body { height: 100%; } était assez pour moi (Opéra inclus comme un test) Ce qui fonctionnait le mieux était html, body { min-height: 100%; } à l'Aide de la hauteur au lieu de min-height gauche mon fond blanc w/o la couleur d'arrière-plan appliqué lorsque j'ai développé certains pliable divs dans le milieu de ma page. min-height fixe qui.
- Pourquoi cette question est-elle passe uniquement lors de l'utilisation d'arrière-plan : gradient linéaire et non avec un simple arrière-plan
- Avez-vous jamais comprendre pourquoi c'est?
- Si cela ne fonctionne toujours pas pour tout le monde juste changer 100% à 100vh.
InformationsquelleAutor capdragon
25

Sur notre site, nous avons des pages où le contenu est statique, et les pages où il est chargé en AJAX. Sur une page (une page de recherche), il y avait des cas où l'AJAX résultats plus que le remplissage de la page, et les cas où il ne reviendrait pas de résultats. Pour que l'image d'arrière-plan pour le remplissage de la page dans tous les cas, nous avons dû appliquer le code CSS suivant:
```
html {
   margin: 0px;
   height: 100%;
   width: 100%;
}

body {
   margin: 0px;
   min-height: 100%;
   width: 100%;
}
```
height pour la html et min-height pour la body.
- Aucun d'entre eux ont besoin d' width: 100%;.
- spot sur @jwatts1980
- en raison de display:block nature
- aussi margin: 0; est suffisant, pas besoin de spécifier l'unité dans lequel vous utilisez zéro de
InformationsquelleAutor jwatts1980
14

Comme aucune des autres réponses ont travaillé pour moi, j'ai décidé de poster cela comme une réponse pour les autres à la recherche d'une solution qui a également constaté le même problème. À la fois le html et le corps doivent être définies avec min-height ou le dégradé ne serait pas remplir la hauteur du corps.

J'ai trouvé Stephen P commentaire à donner la bonne réponse à cette question.
```
html {
    /* To make use of full height of page*/
    min-height: 100%;
    margin: 0;
}
body {
    min-height: 100%;
    margin: 0;
}
```
Quand j'ai le html (ou le html et le corps) de la hauteur à 100%,
```
html {
    height: 100%;
    margin: 0;
}
body {
    min-height: 100%;
    margin: 0;
}
```
- Avez-vous essayé height: 100vh?
InformationsquelleAutor Yvette Colomb
12

J'ai eu à l'appliquer à 100% pour le html et le corps.

InformationsquelleAutor htrufan
4

Essayez d'utiliser viewport (vh, vm) unités de mesure au niveau du corps

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

Utilisation vh unités pour les marges horizontales, des remplissages et des frontières sur le corps et le soustraire de la min-hauteur de la valeur.

J'ai eu bizarre résultats à l'aide de vh,vm unités sur les éléments à l'intérieur du corps, en particulier lors de la re-dimensionnement.

InformationsquelleAutor Mike Wright
1

Je pense en grande partie sur la bonne voie, est de mettre le css pour cela:
```
html
{
    overflow: hidden;
}

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

html, body
{
    height: 100%;
}
```
- Les parties importantes de ce sont les mêmes que la réponse acceptée il y a six ans, désolé.
- c'est Ce que j'utilise.
InformationsquelleAutor Martin Wantke
1

J'ai essayé toutes les solutions ci-dessus et je ne suis pas discréditer l'un d'eux, mais dans mon cas, ils n'ont pas de travail.

Pour moi, le problème a été causé parce que le <header> balise a un margin-top de 5em et la <footer> avait une marge en bas de 5em. Je les ai retirées et au lieu de mettre quelques padding (en haut et en bas, respectivement). Je ne suis pas sûr si le remplacement de la marge a été un idéal de résoudre le problème, mais le point est que, si le premier et le dernier éléments dans votre <body> a certaines marges, vous pouvez les considérer et de les supprimer.

Mon html et body tags avait les styles suivants
```
body {
  line-height: 1;
  min-height: 100%;
  position: relative; }

html {
  min-height: 100%;
  background-color: #3c3c3c; }
```
InformationsquelleAutor dinika saxena
1

Si vous ont d'une frontière ou d'un rembourrage, puis le solution

CSS:
```
html, body {
    margin: 0;
    height: 100%;
}
body {
    border: solid red 5px;
    border-radius: 2em;
}
```
produit de l'imparfait rendu

À obtenir ce droit dans la présence d'une bordure ou d'un rembourrage

utiliser à la place

CSS:
```
html, body {
    margin: 0;
    height: 100%;
}
body {
    box-sizing: border-box;
    border: solid red 5px;
    border-radius: 2em;
}
```
comme Martin souligné, bien que overflow: hidden n'est pas nécessaire.

(2018 - testé avec Chrome 69 et IE 11)
- Votre réponse est pertinente que pour vous, et que vous avez ajouté une bordure à la body tag. Sans cette frontière, la body remplira exactement 100% de la fenêtre d'affichage, vous pouvez le voir avec une couleur de fond par exemple. La bonne réponse à cette question a été accepté il y a 7 ans est toujours valide.
InformationsquelleAutor Vrokipal

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

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

InformationsquelleAutor GigiProve

Vous devez vous connecter pour publier un commentaire.