web-dev-qa-db-fra.com

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

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 faire pour que l'élément <body> remplisse la page entière, toujours?

htmlcssradial-gradients
111
Ry-
html, body {
    margin: 0;
    height: 100%;
}
175
capdragon

Sur notre site, nous avons des pages dont 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 largement la page, et des cas dans lesquels aucun résultat ne serait renvoyé. Pour que l'image de fond remplisse 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 le html et min-height pour le body.

24
jwatts1980

Comme aucune autre réponse ne fonctionnait pour moi, j'ai décidé d'afficher cela comme une réponse pour les autres à la recherche d'une solution qui ont également rencontré le même problème. Le html et le corps devaient être définis avec min-height sinon le dégradé ne remplirait pas la hauteur du corps.

J'ai trouvé Stephen P'scommentaire pour fournir la réponse correcte à cette question.

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

background filling body height

Lorsque j'ai la hauteur html (ou html et body) définie sur 100%,

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

background not filling body

12
Yvette Colomb

Je devais appliquer 100% à la fois HTML et corps.

12
htrufan

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

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

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

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

3
Mike Wright

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 balise <header> avait un margin-top de 5em et que <footer> avait un fond de marge de 5em. Je les ai enlevés et mis à la place un peu de padding (en haut et en bas, respectivement). Je ne sais pas si le remplacement de la marge était une solution idéale au problème, mais le fait est que, si le premier et le dernier élément de votre <body> ont des marges, vous voudrez peut-être les examiner et les supprimer. .

Mes balises html et body avaient les styles suivants

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

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

Si vous avez une bordure ou un remplissage, alors la solution

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

produit le rendu imparfait

not good

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

good

utiliser à la place

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

comme Martin fit remarquer, bien que overflow: hidden ne soit pas nécessaire.

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

1
Vrokipal

Je pense que la manière la plus correcte consiste à définir css sur ceci:

html
{
    overflow: hidden;
}

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

html, body
{
    height: 100%;
}
0
Martin Wantke