J'essaie de définir un <div> à un certain pourcentage de hauteur en CSS, mais il reste de la même taille que le contenu qu'il contient. Lorsque j'enlève le HTML 5 <!DOCTYTPE html> Cependant, cela fonctionne, le <div> en occupant toute la page comme souhaité. Je veux que la page soit validée, alors que dois-je faire ?
J'ai ce CSS sur le <div> qui a un ID de page :
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}J'essaie de définir un div à un certain pourcentage de hauteur en CSS.
Pourcentage de quoi ?
Pour définir un pourcentage de hauteur, son élément parent(*) doit avoir une hauteur explicite. C'est assez évident, car si vous laissez la valeur de height comme auto Mais si le contenu lui-même a une hauteur exprimée en termes de pourcentage du parent, vous vous retrouvez face à un dilemme. Le navigateur abandonne et utilise simplement la hauteur du contenu.
Ainsi, le parent du div doit avoir un explicite height propriété. Bien que cette hauteur puisse également être un pourcentage si vous le souhaitez, cela ne fait que déplacer le problème à un niveau supérieur.
Si vous souhaitez que la hauteur de la division corresponde à un pourcentage de la hauteur de la fenêtre d'affichage, tous les ancêtres de la division, y compris les éléments suivants <html> y <body> , doivent avoir height: 100% Il y a donc une chaîne de pourcentages de hauteur explicites jusqu'à la division.
(* : ou, si le div est positionné, le "bloc contenant", qui est l'ancêtre le plus proche à être également positionné).
Par ailleurs, tous les navigateurs modernes et IE>=9 prennent en charge les nouvelles unités CSS relatives à la hauteur de la fenêtre d'affichage ( vh ) et la largeur de la fenêtre ( vw ):
div {
height:100vh;
}Voir ici pour plus d'infos .
Bien que cela ne fonctionne pas pour l'orientation de l'écran en mode portrait stackoverflow.com/questions/23198237/
Veuillez consulter la réponse de Brian Campbell ci-dessous. Je pense que c'est la bonne solution. Cette réponse semble être une solution de contournement et ne répond pas au problème réel.
Ok, alors pourquoi jsfiddle.net/8dkzp49w/16 cet exemple ne crée pas de piège 22 pour la largeur ? :/
Vous devez définir la hauteur sur le <html> y <body> sinon, ils ne seront pas assez grands pour contenir le contenu. Par exemple :
<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>
¬J'ai mis 20 minutes à comprendre qu'il fallait aussi régler la hauteur du document à 100 %. Je l'ai lu un peu trop tard, mais c'est quand même très brillant. soupir
Ceci devrait être voté comme réponse car il donne une solution à beaucoup de gens qui viennent ici en se demandant ce qui peut être fait. La plupart regardent la première réponse et pensent que ce n'est pas possible et s'éloignent en se demandant si une autre méthode existe sans lire ceci.
Je suis d'accord, c'est la bonne réponse, la hauteur ne fonctionne pas parce que l'élément parent qui est body et html doit être défini. Cette réponse devrait être la réponse acceptée.
La réponse de bobince vous permettra de savoir dans quels cas "height : XX% ;" fonctionnera ou ne fonctionnera pas.
Si vous souhaitez créer un élément avec un ratio défini (hauteur : % de sa propre largeur), utilisez la fonction aspect-ratio propriété. Assurez-vous que la hauteur n'est pas explicitement définie sur l'élément pour que cela fonctionne. https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
.square {
width: 100%;
height: unset;
aspect-ratio: 1 / 1;
}Historiquement, la meilleure façon de procéder était de définir la hauteur à l'aide de la fonction padding-bottom . Exemple pour le carré :
<div class="square-container">
<div class="square-content">
<!-- put your content in here -->
</div>
</div>
.square-container { /* any display: block; element */
position: relative;
height: 0;
padding-bottom: 100%; /* of parent width */
}
.square-content {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}Le conteneur carré sera simplement constitué de rembourrage, et le contenu s'étendra pour remplir le conteneur. Long article de 2009 sur ce sujet : http://alistapart.com/article/creating-intrinsic-ratios-for-video
Vous pouvez utiliser 100vw / 100vh . CSS3 nous donne des unités relatives à la fenêtre d'affichage. 100vw signifie 100 % de la largeur de la fenêtre d'affichage. 100vh ; 100% de la hauteur.
<div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
<div style="width:70%; height: 100%; border: 2px dashed red"></div>
<div style="width:30%; height: 100%; border: 2px dashed red"></div>
</div>
Afin d'utiliser le pourcentage(%), vous devez définir le % de son élément parent. Si vous utilisez body{height: 100%} cela ne fonctionnera pas car son parent n'a pas de pourcentage en hauteur. Dans ce cas, pour que cela fonctionne, il faut que taille du corps vous devez ajouter ceci dans html{height:100%}
Dans d'autres cas, pour se débarrasser de ce pourcentage de définition du parent, vous pouvez utiliser
body{height:100vh}
vh signifie hauteur de la fenêtre
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
3 votes
Voici une explication simple et claire de la CSS
heightavec des valeurs en pourcentage : stackoverflow.com/a/31728799/35972760 votes
Règle le problème du DOCTYPE : stackoverflow.com/a/32215263/3597276
0 votes
Jetez un coup d'œil à cet article qui donne une réponse basée sur les spécifications CSS : stackoverflow.com/a/31032477/247696