Question

我在使用子div的高度使父div溢出时遇到了麻烦。

父div有position:absolute，我希望这个父div能够自动展开子div的内容。

根据彼此的内容，两个孩子的高度应始终为100％。

以下是我迄今为止尝试过的 DEMO 。

Answer 1

我已将table添加到div父母和子女。现在你有100％div与内容

.main_wrap{
  position:absolute;


}
.sub_wrap{
  background: grey;
  width:250px; 
  height:100%;
  min-height:100%;
  margin:0 
    display:table;

}
.left{
  background:red;
  width:50%; 
  min-height:100% ;
  display: table-cell;

}
.right{
  background:green;
  width:48%; 
  min-height:100%;
  vertical-align:top;
  display: table-cell;

}

http://jsfiddle.net/f4tykwpz/2/

Answer 2

如果我理解你的要求。那么以下应该是你问题的答案

仔细看看下面的CSS

<强> CSS

.main_wrap{
  position:absolute;
  height:100%; /* parent div height changed to 100% */
}
.sub_wrap{  /* removed positioning from this parent div so child can overflow their height*/
  left:0; top:0;
  height:200px;
  background: grey;
  width:250px; 
}
.left{
  background:red;
  width:50%; 
  display:inline-block;
  min-height:100%    
}
.right{
  background:green;
  width:48%; display:inline-block;
  min-height:100%;
  vertical-align:top;
  position:absolute; /* To make child div take full height of grand paretn div*/
}

Answer 3

您可以将sub_wrap设置为display：table和要显示的每个子项：table-cell。

Demo

儿童div高度100％

3 个答案: