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.

Ajouter min-height pour enfant2 nd puis de le configurer
À 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