HTML des éléments div, pas à la hauteur de leurs parents, même si le parent est différent de zéro à hauteur de
J'ai un assez simple problème. J'ai un div conteneur avec trois enfants - deux divs et une table. Voici le CSS:
#container {
overflow: auto;
}
#child1 {
float: left;
width: 50px;
height: 100%;
}
#table1 {
float: left;
}
#child2 {
float: left;
width: 50px;
height: 100%;
}
Le HTML est très simple ainsi
<div id='container'>
<div id='child1'></div>
<table id='table1'>
<tbody></tbody>
</table>
<div id='child2'></div>
</div>
Le tableau a du contenu qui définit sa hauteur. Lorsque la page est affichée, la hauteur de la div conteneur parent est défini à la hauteur de la table, comme il se doit. Les autres enfants, cependant, sont effondrées pour une raison quelconque. Voici l'exemple, avec certains éléments de la table et de style pour plus de clarté: http://jsfiddle.net/GUEc6/. Comme vous le voyez, la hauteur de la div conteneur est correctement mis à la hauteur de la table, mais l'enfant1 et enfant2 divs ne parviennent pas à définir correctement leurs hauteurs à 100%. Je sais que si une flottait élément a sa hauteur à 100%, le parent de l'élément doit avoir de la définition de sa propre hauteur de sorte que l'enfant peut être à 100% de quelque chose de concret. Mais il n'a pas l'air comme ça de ce qui se passe ici.
À la hauteur: 100% de travail, "conteneur" doit avoir explicite d'une hauteur définie. Ce n'est pas le cas. Sa hauteur est implicitement donnée par son contenu - c'est à dire la table.
Cela peut vous aider: stackoverflow.com/questions/18362026/...
OriginalL'auteur dima1109 | 2014-01-29
Vous devez vous connecter pour publier un commentaire.
C'est une idée fausse commune au sujet de
height: 100%
.De MDN:
Une solution à votre problème pourrait être le positionnement absolu. Ensemble
position: relative
sur votre récipient et la position des enfants absolument. Réglagetop: 0; bottom: 0;
sera étirer vers le conteneur de hauteur.Démonstration Rapide (montre le concept, vous pourriez avoir besoin de ruser)
et si le conteneur est un TD? comment faire?
Je suis sûr qu'il est ici question avec de multiples solutions, si pas, vous pourriez demander à un
OriginalL'auteur kapa