Child div height 100%

Question

I have trouble making parent div overflow with the child div's height.

Parent div has position:absolute and I want this parent div to auto expand with the child div's content.

And both child div's should always be 100% height based on the each other's content.

Here is the DEMO what I have tried so far.

Do you expect this? The parent div's height should expand based on the height of child divs — Gunaseelan, May 12 '15 at 05:45
possible duplicate of [Expand Parent Div To Child Height](http://stackoverflow.com/questions/384145/expand-parent-div-to-child-height) — Gunaseelan, May 12 '15 at 05:48

Prime · Answer 1 · 2015-05-12T05:51:28.153

1

I have added table to div parent and child.Now you have 100% div with content

.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/

edited May 12 '15 at 05:51

answered May 12 '15 at 05:48

Prime

3,530
5
28
47

This will not make both child divs 100% based on their content though. – Johan Dahl May 12 '15 at 05:49

score 0 · Answer 2 · answered May 12 '15 at 05:44

If I understood your requirement correctly. then following should be the answer to your question

Just take a closer look at following 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*/
}

score 0 · Answer 3 · answered May 12 '15 at 05:45

0

You can set sub_wrap to display:table and each child to display: table-cell.

Demo

answered May 12 '15 at 05:45

Johan Dahl

1,672
3
19
35

Child div height 100%

3 Answers3