HTML div 元素不采用其父级的高度，即使父级具有非零高度

我有一个相当简单的问题。我有一个包含三个孩子的容器 div - 两个 div 和一张桌子。以下是CSS：

#container {
   overflow: auto;
}
#child1 {
   float: left;
   width: 50px;
   height: 100%;
}
#table1 {
   float: left;
}
#child2 {
   float: left;
   width: 50px;
   height: 100%;
}

HTML 也非常简单

  <div id='container'>
      <div id='child1'></div>
      <table id='table1'>
        <tbody></tbody>
      </table>
      <div id='child2'></div>
  </div>

该表有一些设置其高度的内容。当页面渲染时，父容器 div 的高度被设置为表格的高度，这是应该的。然而，其他孩子却因某种原因倒地不起。以下是示例，为了清晰起见，其中包含一些表格元素和样式：http://jsfiddle.net/GUEc6/ http://jsfiddle.net/GUEc6/。如您所见，容器 div 的高度已正确设置为表格的高度，但 child1 和 child2 div 未能正确将其高度设置为表格的 100%。我知道，如果浮动元素的高度设置为 100%，则父元素需要对其自身高度进行某种定义，以便子元素可以 100% 为具体的元素。但看起来这并不是这里发生的事情。

这是一个常见的误解height: 100%.

From MDN https://developer.mozilla.org/en-US/docs/Web/CSS/height:

百分比是根据高度计算的 生成的盒子的包含块。如果包含的高度 堵塞没有明确指定（即，这取决于内容 height)，并且该元素不是绝对定位的，该值 计算为自动。根元素的百分比高度是相对的 到初始包含块。

解决您的问题的一种方法可能是绝对定位。放position: relative放在容器上并将孩子们绝对定位。环境top: 0; bottom: 0;在它们上会将它们拉伸到容器的高度。

快速演示 http://jsfiddle.net/GUEc6/3/（显示概念，您可能需要调整它）