Question

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

我不能使用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>

使用以下CSS

#parent{
    display:table;
    width:200px;
}
.item{
    display:table-cell;
    padding:5px;
}
.data{
    background-color:grey;
}

jsFiddle链接：http://jsfiddle.net/dPw7W/

我希望所有灰色框都是相同的大小。着色父母灰色是作弊

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

Answer 1

要使div填充height: 100%的高度，父级需要定义一个高度。见http://jsfiddle.net/dPw7W/3/

.item{
    display:table-cell;
    padding:5px;
    height: 100px;
}
.data{
    background-color:grey;
    height: 100%;
}

修改由于CSS中的固定高度不是一个选项，因此这是一个基于jquery的解决方案。请注意，它设置固定的高度，但基于最大的div。（JSFiddle：http://jsfiddle.net/dPw7W/9/）

// 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); });

Answer 2

<强> HTML

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

<强> CSS

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

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

查看更新的fiddle（仅在Chrome中测试过）。

Answer 3

将此作为min-height

<强> DEMO

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

}

Answer 4

.data{
    background-color:grey;
    height:100%;
    overflow:auto;
}

Answer 5

简单的解决方案。将height: 100%添加到您的所有元素中。这将使一切变得动态。

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

http://jsfiddle.net/dPw7W/5/

Answer 6

为数据类提供静态高度

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

CSS div填充整个父级而没有位置：绝对

6 个答案: