Faire en sorte que le corps ait 100% de la hauteur du navigateur


845

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 cela ne fonctionne 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, j'obtiens une barre blanche laide en bas.


Réponses:


1092

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

html, 
body {
    height: 100%;
}

Body regarde son parent (HTML) pour savoir comment mettre à l'échelle la propriété dynamique, donc l'élément HTML doit également avoir sa hauteur définie.

Cependant, le contenu du corps devra probablement changer dynamiquement. La définition d'une hauteur minimale de 100% permettra d'atteindre cet objectif.

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

6
merci, cela semble supprimer la barre blanche sur les pages courtes, mais maintenant sur les pages dont la hauteur dépasse la hauteur de la fenêtre du navigateur, j'obtiens une barre blanche de 20 pixels en bas: |
bodyofheat

48
ok j'ai découvert! ça marche si j'ajoute du html, body {min-height: 100%;}: D
bodyofheat

12
Remarque: si vous utilisez la body {min-height}version, vous ne pouvez pas utiliser l' .body-child{height: 100%}astuce.
Salman A

14
la meilleure réponse est avec CSS3, en utilisant vh-> body { height: 100vh }- vérifiez la réponse ici stackoverflow.com/a/25829844/2680216
Adriano Resende

2
@bFunc J'ai ce problème avec Chrome. html {hauteur: 100%;} corps {hauteur: auto} faire le travail.
GBMan

217

Au lieu de définir à la fois la hauteur de l'élément htmlet celle de l' bodyélément 100%, vous pouvez également utiliser des longueurs de pourcentage de fenêtre.

5.1.2. Longueurs en pourcentage de la fenêtre d'affichage: les unités «vw», «vh», «vmin», «vmax»

Les longueurs en pourcentage de la fenêtre sont relatives à la taille du bloc contenant initial. Lorsque la hauteur ou la largeur du bloc contenant 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;
  padding: 0;
}
body {
  min-height: 100vh;
  padding: 0;
}

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


4
Outre le fait que ce soit simple, il est également bon que nous adoptions de nouvelles pratiques.
Pan Wangperawong

3
@niaster Je suis définitivement d'accord. Le support du navigateur s'est déjà amélioré depuis que j'ai également posté cette réponse :)
Josh Crozier

1
@incarnate Ouais .. dommage qu'il ne soit pas :) Il semble que la dernière fois que l'OP était en ligne était le 7/11/11 (la date à laquelle la question a été posée ..) Je doute donc que cela va changer.
Josh Crozier

18
Je ne sais pas pourquoi nous devons commencer à "adopter de nouvelles pratiques" alors que l'ancienne pratique fonctionne bien. Il n'y a aucun avantage à faire cela: le code n'est pas plus petit, ni ne fonctionne mieux, et il existe encore des navigateurs qui ne prennent pas en charge vw / vh.
cimmanon

3
La feuille de style de l'agent utilisateur Chrome ajoute une marge de 8 pixels au corps par défaut (je ne suis pas sûr des autres navigateurs), j'ai donc dû également l'ajouter margin: 0;pour éviter une barre de défilement verticale persistante à droite.
Andy Raddatz

121

Si vous avez une image d'arrière-plan, vous voudrez la définir à la place:

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

Cela garantit que votre balise de corps 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 se répéter / défiler / quoi que ce soit lorsque vous commencez à faire défiler vers le bas.

N'oubliez pas que si vous devez prendre en charge IE6, vous devrez trouver un moyen de vous caler sur le height:100%corps, heightcomme IE6 le traite de min-heighttoute façon.


Fonctionne également quand il y a une flexbox globale juste sous le corps (body> # flexbox-wrapper)
justnorris

2
C'est la bonne réponse, car la réponse acceptée n'augmentera pas car le contenu devient plus long qu'un seul écran.
SimplGy

Merci beaucoup, Angry Dan, cet espace blanc laid au bas de mon site a disparu!
Boris Burkov

Bien sûr, puisque cette question a été posée, les dimensions basées sur le port de vue sont devenues une chose. Alors maintenant, vous pouvez simplement le fairebody{min-height: 100vh}
Angry Dan

Vous devez également body { height: auto; }que les barres de défilement ne s'affichent pas dans FireFox. à part ça, fonctionne parfaitement.
Torxed le

82

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

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

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

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


7
Merci pour la seule réponse qui fonctionne :) Je suppose que «absolu» l'a fait fonctionner
Dmitry Matveev

Fonctionne bien pour moi dans Firefox sans barres de défilement, merci. La réponse acceptée ne le fait pas.
Andrew

@Andrew Curieusement, cela donne des barres de défilement dans FireFox. Cependant, ce dont vous avez besoin pour la réponse acceptée est height: auto;dans la bodyclause pour que les barres de défilement apparaissent maintenant.
Torxed le

@Torxed Je reçois toujours des barres de défilement dans FireFox avec cela aussi. L'ajout du réglage automatique à la hauteur ne semble pas fonctionner pour moi :(
Travis Crum

Cela ne fonctionnait pas pour moi dans Chrome 56.0.2924.87 (64 bits).
Ryan


24

Après avoir testé différents scénarios, je pense 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 les htmlet les bodyéléments augmenteront automatiquement si leur débordement de contenu. J'ai testé cela dans la dernière version de Firefox, Chrome et IE 11.

Voir le violon complet ici (pour vos haineux de table, 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 affichées ici .

html, body {
    height: 100%;
}

L'utilisation du CSS ci-dessus fera que le 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 l'arrière-plan répétitif? Cela se produit car 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 tout autre élément de bloc? Je ne suis pas sûr. Je pense que les navigateurs gèrent cela incorrectement.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Le réglage d'une hauteur minimale de 100% sur le corps comme indiqué ci-dessus provoque d'autres problèmes. Si vous procédez ainsi, vous ne pouvez pas spécifier qu'un div ou une table enfant 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 gèrent cela incorrectement. Je m'attendrais à ce que la taille du corps s'ajuste automatiquement de plus en plus si ses enfants débordaient. Cependant, cela ne semble pas se produire lorsque vous utilisez 100% de hauteur et 100% de largeur.


3
J'ai essayé toutes les réponses les plus votées sur cette page, mais aucune n'a fonctionné. Celui-ci l'a fait!
Ryan

Cette réponse doit être acceptée. Ce height: 100vhn'est pas non plus une solution. La définition de votre conteneur supérieur pour être 100vhélevé et 100vwpeut provoquer des problèmes si le conteneur a des barres de défilement - alors il sera plus grand qu'il ne devrait l'être (et pourrait rendre les barres de défilement visibles inutilement). Les height: 100vhproblèmes causés aussi pour nous sur les appareils Android plus récents (par exemple Xiaomi Mi 9 avec Android 9), où le conteneur serait plus grand que l'écran lui - même, et rendrait inutile de barre de défilement verticale du corps du document.
12h04 jtompl

21

Ce que j'utilise au début 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 un espace à leur gauche ou à leur droite.

Le remplissage de 0 garantit que les éléments HTML et BODY ne repoussent pas automatiquement tout ce qu'ils contiennent vers le bas ou vers la droite en raison des paramètres par défaut du navigateur.

Les variantes de largeur et de hauteur sont définies à 100% pour garantir que le navigateur ne les redimensionne pas en prévision d'une marge ou d'un rembourrage automatiquement défini, les valeurs min et max étant définies au cas où des choses étranges et inexplicables se produiraient, même si vous probablement pas besoin d'eux.

Cette solution signifie aussi que, comme je l'ai fait quand j'ai commencé sur HTML et CSS il y a plusieurs années, vous n'aurez pas à donner votre première <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 en plein écran et j'ai constaté que tout ce que j'utilisais était juste body{margin:0;}et rien d'autre, ce qui a bien fonctionné au cours des 2 années que j'ai travaillé dessus.

J'espère que cette réponse détaillée vous aidera, et je ressens votre douleur. À mes yeux, il est stupide que les navigateurs définissent une frontière invisible à gauche et parfois en haut des éléments body / html.


Pourriez-vous expliquer s'il vous plaît, quel est le but possible des width: 100%éléments body et html? Oui, je comprends, que d'un point de vue pratique, cela body { margin: 0; }devrait suffire dans la plupart des cas. Je veux juste mieux comprendre.
john cj

21

Une mise à jour rapide

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

Une meilleure solution avec le CSS d'aujourd'hui

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

2
En quoi cela offre-t-il quelque chose de différent par rapport aux réponses existantes?
cimmanon

3
J'en ai essayé d'autres aussi, mais je n'ai pas travaillé pour moi. Celui-ci a fonctionné, il peut donc être une solution pour quelqu'un dans le besoin. @cimmanon
Jayant Varshney

Je dois dire que celui-ci fonctionne pour moi à part les autres réponses à vote élevé. overflow: autovoici la magie. Btw j'utilise Chrome.
SkuraZZ

Seule option (que j'ai trouvée) qui permet au contenu débordant de redimensionner la hauteur.
Daniel Sharp

6

Ici:

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}

4

Vous pouvez également utiliser JS si nécessaire

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}

Mais pour cela, vous devez ajouter plus de choses que nécessaire comme la bibliothèque jQuery et l'écriture en JavaScript alors que cela peut être fait en CSS.
Développeur front-end

3

Essayer

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">

2
Pourriez-vous expliquer s'il vous plaît, quel est le but possible des width: 100%éléments body et html? Oui, je comprends, que d'un point de vue pratique, cela body { margin: 0; }devrait suffire dans la plupart des cas. Je veux juste mieux comprendre.
john cj

3

S'il te plaît, vérifie cela:

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

Ou essayez une nouvelle méthode Hauteur de la fenêtre d'affichage:

html, body { width: 100vw; height: 100vh;}

Fenêtre d'affichage: Si votre fenêtre d'affichage signifie que le contenu de l'écran, quelle que soit sa taille, sera à la hauteur de l'écran.


Veuillez inclure une explication de votre solution pour que les autres personnes qui trouvent cette réponse puissent comprendre. Merci!
Shawn

Pourriez-vous expliquer s'il vous plaît, quel est le but possible des width: 100%éléments body et html?
john cj

alors disons que j'ai une table avec 50 colonnes et 1000 lignes ayant des nombres entre 1000 et 9999, ce qui va leur arriver, vont-ils défiler au-delà de la fenêtre comme nous le faisons normalement ou auront-ils une barre de défilement de type à débordement
PirateApp

3

Si vous ne voulez pas que le travail d'édition de votre propre fichier CSS et que vous définissiez vous-même les règles de hauteur, les frameworks CSS les plus typiques résolvent également ce problème avec l'élément body remplissant l'intégralité de la page, entre autres, à l'aise avec plusieurs tailles des fenêtres.

Par exemple, le framework Tacit CSS résout ce problème dès le départ, où vous n'avez pas besoin de définir de règles et de classes CSS et vous incluez simplement le fichier CSS dans votre code HTML.


2
html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
}
html body {
    min-height: 100%
}

Fonctionne pour tous les principaux navigateurs: FF, Chrome, Opera, IE9 +. Fonctionne avec les images d'arrière-plan et les dégradés. Les barres de défilement sont disponibles en fonction des besoins de contenu.


2

J'utiliserais ça

html, body{
      background: #E73;
      min-height: 100%;
      min-height: 100vh;
      overflow: auto; // <- this is needed when you resize the screen
    }
<html>
    <body>
    </body>
</html>

Le navigateur utilisera min-height: 100vhet si en quelque sorte le navigateur est un peu plus ancien, ce min-height: 100%sera la solution de rechange.

Le overflow: autoest nécessaire si vous voulez que le corps et le html augmentent leur hauteur lorsque vous redimensionnez l'écran (à une taille mobile par exemple)



1

toutes les réponses sont correctes à 100% et bien expliquées, mais j'ai fait quelque chose de bien et de très simple pour le rendre réactif.

Ici, l'élément prendra 100% de la hauteur du port de vue, mais en ce qui concerne la vue mobile, il ne semble pas bien spécialement sur la vue portrait (mobile), donc lorsque le port de vue devient plus petit, l'élément s'effondrera et se chevauchera. donc pour le rendre peu réactif voici le code. j'espère que quelqu'un obtiendra de l'aide de cela.

<style>
.img_wrap{
      width:100%;
      background: #777;
}
.img_wrap img{
      display: block;  
      width: 100px;
      height: 100px;
      padding: 50px 0px;
      margin: 0 auto;
}
.img_wrap img:nth-child(2){
      padding-top: 0;
}
</style>

<div class="img_wrap">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>

<script>
   var windowHeight = $(window).height();
   var elementHeight = $('.img_wrap').height();

   if( elementHeight > windowHeight ){
       $('.img_wrap').css({height:elementHeight});
   }else{
       $('.img_wrap').css({height:windowHeight});
   }
</script>

voici la démo JSfiddle.


0

Ici mise à jour

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}

-1

À propos de l'espace supplémentaire en bas: votre page est-elle une application ASP.NET? Si c'est le cas, il y a probablement un emballage presque tout dans votre balisage. N'oubliez pas non plus de styliser le formulaire. L'ajout overflow:hidden;au formulaire peut supprimer l'espace supplémentaire en bas.


6
Je ne recommande pas d'utiliser le débordement: caché sauf si vous avez une très bonne raison. Découvrez pourquoi les choses débordent et ajustez-les pour qu'elles ne débordent pas à la place
jontro

-1
@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }

Pourriez-vous expliquer s'il vous plaît, quel est le but possible des width: 100%éléments body et html? Oui, je comprends, que d'un point de vue pratique, cela body { margin: 0; }devrait suffire dans la plupart des cas. Je veux juste mieux comprendre.
john cj

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.