Child div height 100% of height to parent height

Question

Im here because other similar questions could not help my specific problem.

I need the right div be 100% of the height all the time where the height of the parent depends on the height of the left div , which depends on the content inside.

Here is the html:

 <div class="container clearfix"> <div class="left"></div> <div class="right"></div> </div> 

Here is the CSS:

 .container{ min-height: 10px; width: auto; height: auto; background-color: #eeeeee; } .left{ position: relative; float: left; min-height: 100px; width: 50px; background-color: #dddddd; } .right{ min-height: 20px; position: relative; float: left; height: 100%; width: 50px; background-color: #dddddd; } . .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } 

Note:
I am using clearfix .
And if you can show your answer in jsfiddle

Here is jsFiddle http://jsfiddle.net/C9Kmx/32/

Answer 1

After reading your comments on other solutions, it is clear to me that the only solution for you is the implementation of some JS in your code. However, this is not a problem.

http://jsfiddle.net/b7TuP/

Answer 2

Make the right div position:absolute; and create the parent div position:relative; and then height:100%; will work for the right div. Make sure you also adjust its position and width accordingly. In this example, I gave it left:50px to make sure it is displayed to the right of the left column.

JSFiddle http://jsfiddle.net/e9mvD/

Answer 3

You can use the table-cell value of the display property in this layout and remove the float as follows:

 .left, .right{ display:table-cell; } 

live demo http://jsfiddle.net/C9Kmx/34/

Answer 4

Give position:fixed and height:100% for the right div. This will solve your problem.

Answer 5

You can accomplish this with flexbox and some creativity.

 .container { display: flex; background: black; padding: 5px; width: 300px } .left { height: 200px; flex: 1 0 0px; background: blue; } .right { flex: 1 0 0px; overflow: auto; background: green; } .column { display: flex; flex-direction: column; width: 20%; } 

 <div class="container"> <div class="left"></div> <div class="column"> <div class="right"></div> </div> </div> 

Answer 6

Try specifying a container height with a fixed value

this will also fix the problem. Just tried in jsFiddle

http://jsfiddle.net/C9Kmx/35/

 .container { min-height: 10px; width: auto; height: 100px; background-color: #eeeeee; }