CODEWITHSUNDEEP
htmlcss
user3932810
user3932810

Reputation:

Child div height 100%

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.

Upvotes: 1

Views: 824

Answers (3)

Prime
Prime

Reputation: 3625

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/

Upvotes: 1

Johan Dahl
Johan Dahl

Reputation: 1742

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

Demo

Upvotes: 0

Nilesh Mahajan
Nilesh Mahajan

Reputation: 3516

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*/
}

Upvotes: 0

Related Questions