如何使所有内部div填充其父div的整个高度？

Question

我想让所有的孩子div填充父div的整个高度。 我宁愿在没有固定高度的情况下这样做，只需调整到最大子div的高度但如果唯一的选择是使用JS我会设置一个固定的高度。

我创建了jsbin example来说明问题。

Answer 1

查看display: table属性。您可以在css中模拟表行为，包括所有具有相同高度的动态元素。顺便说一句，是的，这是使用表格的好方法，而不是坏方法。

http://jsbin.com/exeLeCe/7/edit?html,css,output

Answer 2

正如@Ria Elliger所说，你可以使用表格布局。

你应该为表格增加一个元素。这样您就可以将表格对齐到中间，如图所示：

  <div class="con">
    <div id="table">
      <div>gdsgsdg sg sdg sdf gdf gd fg dfg</div>
      <div>sdfkjsd kfjsdf sdfj sdfj sdlk fslkd fskldf  sdf sdf sd f</div>
      <div>gdsgsdg sg sdg sdf gdf gd fg dfg</div>
      <div>gdsgsdg sg sdg sdf gdf gd fg dfg</div>
      <div>gdsgsdg sg sdg sdf gdf gd fg dfg</div>
    </div>
  </div>

表格中的每个div都充当table-cell：

#table > div {
  /*display: inline-block;*/
  border: 1px solid gray;
  width: 50px;
  display: table-cell;
  vertical-align: bottom;
}

由于table-cell将默认与顶部对齐，因此您需要对其进行更改以使其消耗到顶部。这就是使用vertical-align: bottom;

的原因

现在您可以将表格与父元素的中间对齐：

#table
{
  display: table;
  margin: auto;
  border-spacing: 5px 0;
}

我使用了border-spacing，因此您可以看到每个单元格的分隔。这仅分配给每个单元格的左侧和右侧。

jsBin

Answer 3

将此css代码用于html ,,,,,,,

.con
 {
  border: 1px solid gray;
  text-align: center;
  width:400px;
  height:160px;
}

.con div  {
  display:inline-block;
  border: 1px solid gray;
  width: 50px;
  height:100%;
  position:float;
  overflow:hidden;

 }

Answer 4

您可以将此代码用于内部DIV：

.con div {
display: table-cell;
border: 1px solid gray;
width: 50px;
}