Comment se fait-il qu'une valeur en pourcentage pour height ne fonctionne pas mais une valeur en pourcentage pour width fait ?
<div id="working"></div>
<div id="not-working"></div>
#working{
width:80%;
height:140px;
background:orange;
}
#not-working{
width:80%;
height:30%;
background:green;
}La largeur de #working finit par représenter 80 % de la fenêtre, mais la hauteur de l'élément #not-working finit par être 0.
La hauteur d'un élément de bloc correspond par défaut à la hauteur du contenu du bloc. Donc, si l'on donne quelque chose comme ceci :
<div id="outer">
<div id="inner">
<p>Where is pancakes house?</p>
</div>
</div>#inner deviendra suffisamment grande pour contenir le paragraphe et #outer deviendra assez grande pour contenir #inner .
Lorsque vous spécifiez la hauteur ou la largeur en pourcentage, il s'agit d'un pourcentage par rapport au parent de l'élément. Dans le cas de la largeur, tous les éléments de bloc sont, sauf indication contraire, aussi larges que leur parent jusqu'à <body> ; ainsi, la largeur d'un élément de bloc est indépendante de son contenu et dit width: 50% donne un nombre bien défini de pixels.
Toutefois, la hauteur d'un élément de bloc dépend de son contenu sauf si vous spécifiez une hauteur spécifique. Il y a donc une rétroaction entre le parent et l'enfant en ce qui concerne la hauteur et le fait de dire height: 50% ne donne pas une valeur bien définie, à moins que vous ne brisiez la boucle de rétroaction en donnant à l'élément parent une hauteur spécifique.
Une valeur en pourcentage dans un height présente une petite complication, et la propriété width et height se comportent en fait différemment les unes des autres. Laissez-moi vous faire visiter les caractéristiques techniques.
height propriété :Jetons un coup d'œil à ce que la spécification CSS Snapshot 2010 dit à propos de height :
Le pourcentage est calculé par rapport à la hauteur de la boîte générée. bloc contenant . Si la hauteur du bloc contenant n'est pas spécifiée explicitement (c'est-à-dire qu'elle dépend de la hauteur du contenu) et que cet élément n'est pas positionné de manière absolue, la valeur est égale à "auto". Un pourcentage de hauteur sur l'élément Root est relatif à l'élément bloc de contention initial . Remarque : pour les éléments positionnés de manière absolue dont le bloc contenant est basé sur un élément de niveau bloc, le pourcentage est calculé par rapport à la hauteur du bloc de remplissage de cet élément.
OK, démontons ça étape par étape :
Le pourcentage est calculé par rapport à la hauteur de la boîte générée. bloc contenant .
Qu'est-ce qu'un bloc contenant ? C'est un peu compliqué, mais pour un élément normal dans le modèle par défaut static la position, c'est :
la boîte ancêtre du conteneur de bloc la plus proche
ou en anglais, sa boîte mère. (Il vaut la peine de savoir ce qu'il en serait de fixed et absolute également, mais j'en fais abstraction pour que cette réponse soit courte).
Prenez donc ces deux exemples :
<div id="a" style="width: 100px; height: 200px; background-color: orange">
<div id="aa" style="width: 100px; height: 50%; background-color: blue"></div>
</div>
<div id="b" style="width: 100px; background-color: orange">
<div id="bb" style="width: 100px; height: 50%; background-color: blue"></div>
</div>Dans cet exemple, le bloc de contenu de #aa est #a et ainsi de suite pour #b et #bb . Jusqu'à présent, tout va bien.
La phrase suivante de la spécification pour height est la complication que j'ai mentionnée dans l'introduction de cette réponse :
Si la hauteur du bloc contenant n'est pas spécifié explicitement (c'est-à-dire qu'elle dépend de la hauteur du contenu), et cet élément n'est pas positionné de manière absolue, la valeur est égale à "auto". .
Il est important de savoir si la hauteur du bloc contenant a été spécifiée explicitement !
height:200px est de 100px dans le cas de #aa
height:auto est auto qui est de 0px dans le cas de #bb puisqu'il n'y a pas de contenu pour auto pour s'étendre àComme l'indique la spécification, il est également important de savoir si le bloc contenant a été positionné de manière absolue ou non, mais passons maintenant à width .
width propriété :Cela fonctionne-t-il de la même manière pour width ? Jetons un coup d'œil à la spécification :
Le pourcentage est calculé par rapport à la largeur du bloc contenant la boîte générée.
Jetez un coup d'œil à ces exemples familiers, modifiés par rapport aux précédents pour varier. width au lieu de height :
<div id="c" style="width: 200px; height: 100px; background-color: orange">
<div id="cc" style="width: 50%; height: 100px; background-color: blue"></div>
</div>
<div id="d" style=" height: 100px; background-color: orange">
<div id="dd" style="width: 50%; height: 100px; background-color: blue"></div>
</div>width:200px est de 100px dans le cas de #cc
width:auto est de 50% de ce que width:auto finit par être, contrairement à height il n'y a pas de règle spéciale qui traite ce cas différemment.Maintenant, voici la partie délicate : auto a des significations différentes, notamment selon qu'il a été spécifié pour width o height ! Pour height il s'agissait simplement de la hauteur nécessaire pour contenir le contenu*, mais pour width , auto est en fait plus compliqué. Vous pouvez voir dans l'extrait de code que, dans ce cas, il s'agit de la largeur de la fenêtre d'affichage.
Qu'est-ce que la spécification dit à propos de la valeur automatique pour la largeur ?
La largeur dépend des valeurs des autres propriétés. Voir les sections ci-dessous.
Wahey, ça n'aide pas. Pour vous épargner la peine, je vous ai trouvé la section pertinente pour notre cas d'utilisation, intitulée "calculer les largeurs et les marges", sous-titré "éléments non remplacés au niveau du bloc dans le flux normal". :
Les contraintes suivantes doivent être respectées parmi les valeurs utilisées des autres propriétés :
margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = largeur du bloc qui le contient
OK, donc width ainsi que les marges, bordures et rembourrages correspondants doivent tous être égaux à la largeur du bloc contenant ( pas descendants la voie height œuvres). Encore une phrase de spéculation :
Si la valeur "width" est fixée à "auto", toutes les autres valeurs "auto" deviennent "0" et "width" découle de l'égalité qui en résulte.
Aha ! Donc dans ce cas, 50% de width:auto correspond à 50 % de la fenêtre d'affichage. J'espère que tout a enfin un sens maintenant !
Notes de bas de page
* Du moins, dans la mesure où cela compte dans ce cas. <a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">spec </a>Très bien, tout n'a de sens que maintenant.
Je pense que vous devez simplement lui donner un conteneur parent... même si la hauteur de ce conteneur est définie en pourcentage. Cela semble fonctionner parfaitement : JSFiddle
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 50%;
}
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.
