Make body a 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 la height: 100% , mais ça ne marche pas.

Je veux 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, j’obtiens une mauvaise barre blanche en bas.

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

 html, body { height: 100%; } 

Body recherche son parent (HTML) pour savoir comment mettre à l’échelle la propriété dynamic, de sorte que l’élément HTML doit également avoir sa hauteur définie.

Cependant, le contenu du corps devra probablement changer dynamicment. Définir min-height à 100% permettra d’atteindre cet objective.

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

Au lieu de définir les hauteurs des éléments html et body à 100% , vous pouvez également utiliser des longueurs de pourcentage de fenêtre d’affichage.

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

Les longueurs de pourcentage de fenêtre d’affichage 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 cette instance, vous pouvez utiliser la valeur 100vh , qui correspond à la hauteur de la fenêtre d’affichage.

Exemple ici

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

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

Si vous avez une image de fond, vous voudrez plutôt la définir à la place:

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

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

Rappelez-vous que si vous devez supporter IE6, vous devrez trouver un moyen de caler en height:100% pour le corps, IE6 traite de toute façon la height comme la min-height .

Si vous souhaitez conserver les marges sur le corps et ne pas vouloir les 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 du 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; } 

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 automatiquement positionnés par le navigateur pour avoir un espace à gauche ou à droite.

Le remplissage de 0 garantit que les éléments HTML et BODY ne poussent pas automatiquement tous les éléments internes à cause des parameters 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 remplissage automatique, avec des valeurs min et max définies au cas où des choses étranges et inexplicables se produisent. probablement pas besoin d’eux.

Cette solution signifie également que, comme je l’ai fait lorsque j’ai commencé à utiliser HTML et CSS pour la première fois il y a plusieurs années, vous n’auriez pas à donner à votre première

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 du body{margin:0;} et rien d’autre, ce qui a bien fonctionné pendant les 2 années où 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 limite invisible à gauche et parfois au-dessus des éléments body / html.

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 dynamic dans la mesure où le HTML et l’élément body vont se développer automatiquement si leur contenu déborde. Je l’ai testé dans la dernière version de Firefox, Chrome et IE 11.

Voir le violon complet ici (car vous détestez les tables, 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 empêchera l’extension HTML et l’élément body de se développer automatiquement si leur contenu débordait, comme illustré ici:

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

Pendant que vous faites défiler, remarquez le fond répétitif? Cela se produit car la hauteur de l’élément body n’a PAS augmenté en raison du débordement de sa table enfant. Pourquoi ne pas s’étendre comme n’importe quel autre élément de bloc? Je ne suis pas sûr. Je pense que les navigateurs ne le font pas correctement.

 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’un div ou une table enfant prenne 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 traitent cela de manière incorrecte. Je m’attendrais à ce que la taille du corps s’ajuste automatiquement en grandissant si ses enfants débordent. Cependant, cela ne semble pas se produire lorsque vous utilisez 100% de hauteur et 100% de largeur.

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

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 la taille du contenu de l’écran, celle-ci prendra toute la hauteur de l’écran.

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

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

 body{ height: 100vh; } 
 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 tant que contenu nécessaire.

Essayer

   

Si vous ne voulez pas éditer 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 avec l’élément body remplissant l’intégralité de la page, entre autres, à l’aise avec plusieurs éléments. tailles de fenêtres.

Par exemple, le framework Tacit CSS résout ce problème sans avoir à définir de règles ni de classes CSS et vous n’incluez que le fichier CSS dans votre code HTML.

Essayez d’append:

 body { height: 100vh; } 

toutes les réponses sont 100% correctes 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 d’affichage, mais en ce qui concerne la vue mobile, il ne semble pas très bien en mode portrait (mobile). donc le rendre peu réactif ici est du code. J’espère que quelqu’un pourra vous aider.

  

voici JSfiddle Demo.

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 oui, il y a probablement un emballage presque tout dans votre balisage. N’oubliez pas de styliser la forme aussi. Ajout de 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 

Cela rend ViewPort 100% égal à la hauteur.

Donc, votre code devrait être

  body{ height:100vh; }