Pourquoi dans l'exemple suivant, la hauteur de l'intérieur HTML: P> div code> n'est pas comme celle du wrapper div code>? .wrapper {
background-color: #000;
min-height: 100px;
}
.inner {
display: inline-block;
background-color: #777;
height: 100%;
}
4 Réponses :
Je pense que c'est la sortie que vous souhaitez: http://jsfiddle.net/xhp7x/
.wrapper {
display: table;
background-color: #000;
height: 100px;
width: 100%;
}
.wrapper2 {
height: 100%;
display: table-row
}
.inner {
height: 100%;
display: inline-block;
background-color: #777;
margin-right: 10px;
vertical-align: top;
}
Dans votre exemple, le wrapper n'a pas min-hauteur .
Mais il se comporte comme si oui. Le texte court garde le wrapper à 100px et le texte grand étendit
Ok ... mais la hauteur des emballages internes est inférieure à la hauteur de l'emballage. Je veux qu'ils soient égaux.
Édité. Désolé, travaille sur Chrome. Maintenant travaille sur Firefox. Ne peut pas le faire fonctionner dans IE si ... continuera à essayer
Salut .. Il est impossible de travailler dans IE, à moins que vous spécifiez la hauteur de la div. Pardon.
Vous souhaitez spécifier les deux, CSS http://jsfiddle.net/gpekw/2/ J'ai Ajout d'un échantillon ici avec des frontières. légèrement modifié à la réponse de votre commentaire, vous êtes à peu près correct de votre CSS d'origine. Le HTML ci-dessous aura une hauteur minimale de div 100px. Au fur et à mesure de la taille de l'interne div augmente, l'emballage se développera automatiquement. J'en ai démontré cela en ajoutant un attribut style à la première classe interne Hauteur n'est pas identique à celui de min-hauteur . Vous souhaitez spécifier les deux hauteur et min-hauteur .
hauteur = lorsqu'il est utilisé comme un % , il s'agit d'un pourcentage de la hauteur de la fenêtre
min-hauteur = comme vous faites glisser la fenêtre plus petite, la div avec un % hauteur continuera de réduire jusqu'à ce qu'il soit HITS le min-hauteur
max-hauteur = comme vous faites glisser la fenêtre plus grande, la div avec un % hauteur continuera d'augmenter jusqu'à ce qu'il soit HITS le max-hauteur
.
J'ai essayé cela, mais si vous mettez la hauteur, la DIV ne pousse pas si le contenu si plus de 100px, je suppose que c'est une condition préalable
Dans votre exemple, il n'y a pas de min-hauteur sur le wrapper div.
@misha, je l'ai mis à jour, désolé j'ai eu des problèmes avec la copie et la pâte :)
Le problème est que je ne veux pas définir de la hauteur de wrapper . Je veux que ce soit 100px ou plus (au cas où la Div intérieure est trop haute).
Je sais un moyen de définir la hauteur de la division div, de la même manière que sa hauteur parent divise pour utiliser le parent et la position absolue pour l'enfant.
.wrapper {
background-color: #000;
min-height: 100px;
position: relative;
}
.inner {
display: inline-block;
background-color: #777;
position: absolute;
height: 100%;
}
hm .. bizarre, il n'a pas développé la hauteur d'un élément élevé jsfiddle.net/kbrvh
jsfiddle.net/kbrvh/3 Comme vous pouvez le constater, le premier avec du texte en noir, si Vous insérez plus de lignes, il déborde de l'extérieur DIV, car l'extérieur DIV est 100px haut et cette hauteur n'augmentera pas lorsque son enfant avec une position absolue augmente la hauteur. D'autre part, le second avec du texte blanc, insérer plus de lignes et vous verrez;)
Certaines propriétés de CSS héritent de la valeur du parent automatiquement, certaines ne le font pas. La hauteur minimale doit être explicitement indiquée lorsque vous souhaitez hériter de la valeur du parent:
Si la hauteur de l'emballage n'est pas dynamique, alors pourquoi devez-vous utiliser% lorsque l'intérieur pouvait simplement avoir la même hauteur que vous avez spécifiée pour Wrapper. De plus, si l'intérieur était à 100% élevé, alors comment en avoir deux à l'enveloppe.
Merci pour ce site Btw Misha, ce sera très utile :)
@IAI: Bienvenue dans le club :)
@Marty: La hauteur de l'emballage est dynamique, il peut être 100px ou plus.