Question Rendre le corps à 100% de la hauteur du navigateur


Je veux que le corps ait 100% de la hauteur du navigateur. Puis-je le faire en utilisant CSS?

J'ai essayé de régler height: 100%mais ça ne marche pas.

Je veux définir une couleur d'arrière-plan pour une page pour remplir toute la fenêtre du navigateur, mais si la page a peu de contenu, je reçois une barre blanche laide en bas.


617
2017-07-11 18:50


origine


Réponses:


Essayez également de définir la hauteur de l'élément html à 100%.

html, 
body {
    height: 100%;
}

Le corps se tourne vers son parent (HTML) pour savoir comment mettre à l'échelle la propriété dynamique, de sorte que l'élément HTML doit également avoir sa hauteur définie.

Cependant, le contenu du corps devra probablement changer de façon dynamique. Le réglage de min-height à 100% permettra d'atteindre cet objectif.

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

820
2017-07-11 18:53



Comme alternative à la configuration du html et body les hauteurs de l'élément à 100%, vous pouvez également utiliser viewport-longueurs de pourcentage.

5.1.2. Viewport-longueurs de pourcentage: les unités 'vw', 'vh', 'vmin', 'vmax'

Les longueurs de pourcentage de viewport sont relatives à la taille du bloc conteneur initial. Lorsque la hauteur ou la largeur du bloc conteneur initial est modifiée, elles sont mises à l'échelle en conséquence.

Dans ce cas, vous pouvez utiliser la valeur 100vh - qui est la hauteur de la fenêtre.

Exemple ici

body {
    height: 100vh;
}
body {
    min-height: 100vh;
}

Ceci est pris en charge dans la plupart des navigateurs modernes - le soutien peut être trouvé ici.


143
2017-09-14 03:39



Si vous avez une image d'arrière-plan, alors vous voudrez définir ceci:

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

Cela garantit que votre balise body est autorisée à continuer de croître lorsque le contenu est plus grand que la fenêtre d'affichage et que l'image d'arrière-plan continue de répéter / défiler / quoi que ce soit lorsque vous commencez à défiler vers le bas.

Rappelez-vous si vous devez soutenir IE6, vous devrez trouver un moyen de coincer dans height:100% pour le corps, gâteries IE6 height comme min-height en tous cas.


113
2017-11-01 06:55



Si vous souhaitez conserver les marges sur le corps et ne voulez pas de barres de défilement, utilisez le css suivant:

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

Réglage body {min-height:100%}  vous donnera des barres de défilement.

Voir la démo à http://jsbin.com/aCaDahEK/2/edit?html,output .


62
2017-12-01 08:24



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

25
2017-07-11 18:54



Ce que j'utilise au démarrage de chaque fichier CSS que j'utilise est le suivant:

html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

La marge de 0 garantit que les éléments HTML et BODY ne sont pas positionnés automatiquement par le navigateur pour avoir de l'espace à gauche ou à droite d'eux.

Le remplissage de 0 garantit que les éléments HTML et BODY ne poussent pas automatiquement tous les éléments vers l'intérieur ou vers le bas en raison des paramètres par défaut du navigateur.

Les variantes de largeur et de hauteur sont définies à 100% pour éviter que le navigateur ne les redimensionne en prévision d'une marge ou d'un remplissage automatique, avec des valeurs min et max définies au cas où des éléments étranges et inexplicables se produisent, probablement pas besoin d'eux.

Cette solution signifie également que, comme je l'ai fait lorsque j'ai commencé à travailler sur HTML et CSS il y a plusieurs années, vous n'aurez pas à donner votre premier <div> une margin:-8px; pour le faire rentrer dans le coin de la fenêtre du navigateur.


Avant de poster, j'ai regardé mon autre projet CSS plein écran et j'ai trouvé que tout ce que j'utilisais était juste body{margin:0;}et rien d'autre, ce qui a bien fonctionné pendant les deux années où j'ai travaillé dessus.

J'espère que cette réponse détaillée aide, et je ressens votre douleur. À mes yeux, il est stupide que les navigateurs définissent une limite invisible sur la partie gauche et parfois supérieure des éléments body / html.


18
2017-10-28 02:32



Après avoir testé différents scénarios, je crois que c'est la meilleure solution:

html {
    width:100%;
    height: 100%;
    display: table;
}

body {
    width:100%;
    display:table-cell;
}

html, body {
    margin: 0px;
    padding: 0px;
}

Il est dynamique en ce que le html et l'élément body vont se développer automatiquement si leur contenu déborde. J'ai testé cela dans la dernière version de Firefox, Chrome et IE 11.

Voyez le violon complet ici (pour vous les amateurs de table là-bas, vous pouvez toujours le changer pour utiliser un div):

https://jsfiddle.net/71yp4rh1/9/


Cela étant dit, il y a plusieurs problèmes avec les réponses postées ici.

html, body {
    height: 100%;
}

En utilisant le CSS ci-dessus, l'élément html et l'élément body ne se développeront PAS automatiquement si leur contenu déborde comme indiqué ici:

https://jsfiddle.net/9vyy620m/4/

Lorsque vous faites défiler, remarquez le fond qui se répète? Cela se produit parce que la hauteur de l'élément de corps n'a pas augmenté en raison du débordement de sa table enfant. Pourquoi ne se développe-t-il pas comme n'importe quel autre élément de bloc? Je ne suis pas sûr. Je pense que les navigateurs gèrent mal cela.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Le réglage d'une hauteur minimale de 100% sur le corps comme indiqué ci-dessus entraîne d'autres problèmes. Si vous faites cela, vous ne pouvez pas spécifier qu'une div div ou une table occupe une hauteur en pourcentage comme indiqué ici:

https://jsfiddle.net/aq74v2v7/4/

J'espère que cela aide quelqu'un. Je pense que les navigateurs ne le manipulent pas correctement. Je m'attendrais à ce que la taille du corps s'ajuste automatiquement de plus en plus grande si ses enfants débordent. Cependant, cela ne semble pas se produire lorsque vous utilisez 100% de hauteur et 100% de largeur.


16
2017-08-12 00:58



Une mise à jour rapide

html, body{
    min-height:100%;
    overflow:auto;
}

8
2017-08-03 22:49