Faire en sorte que le corps ait 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 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.

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%;
}

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 .

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.

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 .

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

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.

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.

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

Ici:

html,body{
    height:100%;
}

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

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

Essayer

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

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.

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.

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.

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)

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

body{ height: 100vh; }

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.

Ici mise à jour

html
  {
    height:100%;
  }

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

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

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

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

CSS3 a une nouvelle méthode.

 height:100vh

Il rend ViewPort 100% égal à la hauteur.

Donc, votre code devrait être

 body{
 height:100vh; 
 }