Html CSS div填充整个父级，不带位置：绝对

我有一些div是使用tablecss以表格的方式排列的。每个细胞都有一个子细胞。我需要这个孩子来填补父母的身高

我不能使用position:absolute，因为它会破坏站点其余部分的布局。示例HTML是：

<div id="parent">
    <div class="item">
        <div class="data">
            sasfadasd
            aasdfa
            asdfasdf
            asdf
        </div>
   </div>
    <div class="item">
        <div class="data">
            sasfadasd
        </div>
    </div>
    <div class="item">
        <div class="data">
            sasfadasd
            aasdfa
        </div>
    </div>
</div>

JSIDLE链接：

我希望所有的灰色盒子大小都一样。把父母涂成灰色是欺骗

---

编辑
无法设置父级高度。它由子元素动态填充。数据div仅存在，以便我可以分隔div。如果我使用边框间距，它将不允许我动态设置间距。如果有人能建议如何在没有边框间距的情况下分隔单元格，这将解决问题。

请给出

min height

.data{
   background-color:grey;
    min-height:300px;

}

---

对于

div

s要通过

height:100%

填充高度，父级需要定义一个高度。看

编辑： 因为CSS中的固定高度不是一个选项，所以这里有一个基于jquery的解决方案。请注意，它设置了固定的高度，但基于最大的div（JSFiddle:）

---

简单的解决方案。将

高度：100%

添加到所有元素中。这将使一切保持活力

#parent{
    display:table;
    width:200px;
    height: 100%;
}
.item{
    display:table-cell;
    padding:5px;
    height: 100%; /* Not neccessary */
}
.data{
    background-color:grey;
    height: 100%;
}

HTML

<div id="items">
  <div class="item">
    sasfadasd
    aasdfa
    asdfasdf
    asdf
  </div>
  <div class="item">
    sasfadasd
  </div>
  <div class="item">
   sasfadasd
   aasdfa
  </div>
 </div>

---

请参阅更新版（仅在Chrome中测试）。

为数据类提供静态高度

 .data{
    background-color:grey;
    height : 100px;
  }

---

更新。无法设置父级高度。对于此类问题来说太过强大。我希望它能够根据最大元素（因此是表格单元格）动态更改高度。如果你能建议一种在保持单元格间距的同时做到这一点的方法。。。但我不能使用固定高度。这在所有普通浏览器中都不起作用，IE10和Firefox都不这样做。我在Chrome上检查过，但它没有固定的长度。你在这里看到家长设置了高度。你想通过纯CSS还是通过任何必要的方式（JavaScript）来实现这一点？你能改变你的标记吗？如果是，是否可以删除

.item

divs？最好使用CSS。如果没有可用的解决方案，我会选择JS，但我真的更愿意not@melhosseiny：所需结果是包含3个相等单元格的表格。但是，我需要动态地将它们隔开，我不能使用

边框间距

属性，因为该属性只有将它们均匀隔开的选项。如果您可以找到一种不使用边框间距动态分隔的方法，那么

.item

divs可以go@DavidColwell，我编辑了我的答案，添加了基于JS/jquery的解决方案

高度：100%

的问题是，父元素上必须设置高度。如果

position:absolute

没有选项，而

height:100%

显然两者都没有，那么似乎没有干净的解决方案。我喜欢这个解决方案，它如此简单，让我思考为什么它不可行though@skv同一行中的表格单元格具有相同的高度，但它们的子单元格不具有相同的高度，因此只需删除子单元格

。data

div即可。我同意，但令人惊讶的是，OP没有响应，请等待此解决方案是否有效。我的问题是我不想要白色边框，但是，因为我没有在OP中指定，这是可以接受的。

// When document.ready fires
$(function() {
    var maxHeight = 0, height;

    // Loop over all divs with css class 'data'
    $('.data').each(function() {
        if ((height = $(this).height()) > maxHeight) {
            // Store highest width of them all in a variable
            maxHeight = height;
        }
    })

    // Set all '.data'-divs to the same height.
    $('.data').height(maxHeight);
});

#parent{
    display:table;
    width:200px;
    height: 100%;
}
.item{
    display:table-cell;
    padding:5px;
    height: 100%; /* Not neccessary */
}
.data{
    background-color:grey;
    height: 100%;
}

<div id="items">
  <div class="item">
    sasfadasd
    aasdfa
    asdfasdf
    asdf
  </div>
  <div class="item">
    sasfadasd
  </div>
  <div class="item">
   sasfadasd
   aasdfa
  </div>
 </div>

#items {
  display:table;
  width:200px;
}  

.item {
  display: table-cell;
  background-color:grey;
  border: 5px solid white;
}

 .data{
    background-color:grey;
    height : 100px;
  }