1

我有一些使用表格 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。如果我使用边框间距，它不会让我动态设置间距。如果有人可以建议如何在没有边框间距的情况下分隔单元格，那将解决问题。

4

6 回答 6

1

为了让divs 通过 填充高度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);
});
于 2013-08-09T06:41:35.743 回答
1

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

请参阅更新的小提琴（仅在 Chrome 中测试）。

于 2013-08-09T07:49:13.863 回答
0 
.data{
    background-color:grey;
    height:100%;
    overflow:auto;
}
于 2013-08-09T06:41:33.197 回答
0

让这个给min-height

演示

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

}
于 2013-08-09T06:40:08.837 回答
0

简单的解决方案。添加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/

于 2013-08-09T06:44:57.450 回答
0

给你的数据类一个静态高度

 .data{
    background-color:grey;
    height : 100px;
  }
于 2013-08-09T09:57:59.867 回答