web-dev-qa-db-fra.com

Faire corps avoir 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 définir height: 100%, mais cela ne fonctionne pas.

Je souhaite définir une couleur d'arrière-plan pour qu'une page remplisse toute la fenêtre du navigateur, mais si la page a peu de contenu, une barre blanche laide apparaît en bas.

htmlcssheight
686
bodyofheat

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

html, 
body {
    height: 100%;
}

Body cherche dans son parent (HTML) comment mettre à l'échelle la propriété dynamique. Par conséquent, la hauteur de l'élément HTML doit également être définie. 

Cependant, le contenu du corps devra probablement changer de manière dynamique . Régler min-height à 100% permettra d'atteindre cet objectif.

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

Au lieu de définir les hauteurs des éléments html et body sur 100%, vous pouvez également utiliser des longueurs de pourcentage d'affichage.

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

Les longueurs en pourcentage de la fenêtre de visualisation sont relatives à la taille du bloc contenant initial. Lorsque la hauteur ou la largeur du bloc contenant initial est modifiée, ils sont mis à l'échelle en conséquence.

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

Exemple ici

body {
    height: 100vh;
}

body {
    min-height: 100vh;
}

Ceci est supporté par la plupart des navigateurs modernes - le support peut être trouvé ici .

174
Josh Crozier

Si vous avez une image d’arrière-plan, vous voudrez plutôt le définir:

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

Cela garantit que la balise body continue de croître lorsque le contenu est plus haut que la fenêtre d'affichage et que l'image d'arrière-plan continue de se répéter/de faire défiler/quoi que vous fassiez lorsque vous commencez à faire défiler vers le bas.

N'oubliez pas que si vous devez prendre en charge IE6, vous devez trouver un moyen de caler height:100% dans body, IE6 traite height comme min-height de toute façon.

115
Angry Dan

Si vous voulez 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; }

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

68
dpatru
html, body
{
  height: 100%;
  margin: 0;
  padding: 0;
}
26
Catfish

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 0 garantit que les éléments HTML et BODY ne sont pas automatiquement positionnés par le navigateur pour laisser de l'espace à leur gauche ou à leur droite.

Le remplissage de 0 garantit que les éléments HTML et BODY ne repoussent pas automatiquement tout ce qui se trouve à l'intérieur en raison de 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 de la création d'une marge ou d'un remplissage auto-définis probablement pas besoin d'eux.

Cette solution signifie également que, comme je l'ai fait lorsque j'ai commencé à utiliser HTML et CSS il y a plusieurs années, vous n'avez pas à donner à votre premier <div> un margin:-8px; pour l'adapter au coin de la fenêtre du navigateur.

Avant de poster, j’ai examiné mon autre projet CSS en plein écran et constaté que tout ce que j’utilisais n’était que body{margin:0;} et rien d’autre, ce qui a bien fonctionné au cours des deux années de travail.

J'espère que cette réponse détaillée aide, et je sens votre douleur. À mes yeux, il est idiot que les navigateurs définissent une limite invisible à gauche et parfois au-dessus des éléments body/html.

19
MineAndCraft12

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 éléments html et 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.

Voir le violon complet ici (pour vous haïr 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%;
}

En utilisant les CSS ci-dessus, les éléments html et body ne seront PAS automatiquement développés si leur contenu déborde, comme indiqué ici:

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

Pendant que vous faites défiler, remarquez l’arrière-plan qui se répète? Cela est dû au fait que la hauteur de l'élément body 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 cela de manière incorrecte.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Définir une hauteur minimale de 100% sur le corps, comme indiqué ci-dessus, pose d'autres problèmes. Si vous faites cela, vous ne pouvez pas spécifier qu'une div ou une table enfant prenne une hauteur en pourcentage, comme indiqué ici:

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

J'espère que ça aide quelqu'un. Je pense que les navigateurs traitent cela de manière incorrecte. Je m'attendrais à ce que la taille du corps s'adapte automatiquement à sa taille si ses enfants débordent. Cependant, cela ne semble pas se produire lorsque vous utilisez 100% de hauteur et 100% de largeur.

18
OwN

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;
}
13
Jayant Varshney

Ici:

html,body{
    height:100%;
}

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

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)
}
3
Herbs

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

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

Ou essayez une nouvelle méthode Viewport height:

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

Fenêtre d'affichage: Si vous utilisez la fenêtre d'affichage, quelle que soit sa taille, le contenu de l'écran atteindra toute sa hauteur.

3
Ayyappan K

Si vous ne souhaitez pas modifier votre propre fichier CSS et définir vous-même les règles de hauteur, les frameworks CSS les plus typiques résolvent également ce problème en remplissant, entre autres, l'élément body de l'ensemble de la page. tailles de fenêtres.

Par exemple, Tacit CSS framework résout ce problème immédiatement, vous n'avez pas besoin de définir de règles ni de classes CSS et vous ne faites qu'inclure le fichier CSS dans votre code HTML.

2
Filipe Freire

Seulement avec 1 ligne de CSS… Vous pouvez le faire.

body{ height: 100vh; }
2
Sanjib Debnath

Essayer

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

Essayez d'ajouter:

body {
height: 100vh;
}
1
annasvst
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 de fond et les dégradés. Les barres de défilement sont disponibles selon les besoins en contenu. 

1
Corni

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

ici, l'élément prendra 100% de la hauteur du port de vue, mais lorsqu'il s'agit de la vue mobile, il n'a pas l'air bien, surtout en mode portrait (mobile). Ainsi, lorsque le port de vue devient plus petit, l'élément se réduira et se chevauchera. donc pour le rendre un peu réactif, voici le code . espérons que quelqu'un obtiendra de l'aide.

<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 JSfiddle Demo.

0
wasimv09

Mise à jour ici 

html
  {
    height:100%;
  }

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

Je voudrais utiliser ceci

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: 100vh et si le navigateur est un peu plus ancien, le min-height: 100% sera la solution de secours.

Le overflow: auto est nécessaire si vous souhaitez que le corps et le code HTML augmentent leur hauteur lorsque vous redimensionnez l'écran (à une taille de mobile par exemple).

0
medBouzid