Inner div to have 100% height inside container with auto height

Question

I try my best to make the div expand fully to the height of the container.

Markup:

<div class="container"> <div class="innerOne inner"></div> <div class="innerTwo inner"></div> </div> 

In different .innerTwo content is higher than .innerOne , but I would like the background to be the same size as .innerTwo

Styles:

 .container { width: 100%; height: auto; background-color: yellow; /* clearfix */ *zoom: 1; &:before, &:after { display: table; content: ""; line-height: 0; } &:after { clear: both; } } .inner { float: left; width: 50%; height: 100%; background-color: red; } 

But the heights do not match. I know that this can be done by providing the container with a given height, but I do not want to do this, because it is a responsive site. Is it possible? I would prefer not to use JS.

Answer 1

You can use the display: table-cell property to do this. Write like this:

 .container{ width:100%; border:1px solid red; display:table; } .inner{ display:table-cell; background:green; width:50%; } .innerTwo{ background:blue } 

Check out http://jsfiddle.net/XXHTC/

Answer 2

This article discusses aspect ratio and size issues in sensitive environments. This may not be the answer to your specific problem, but the section that discusses the use of percent fill sometimes helped me. http://css-tricks.com/rundown-of-handling-flexible-media/

Answer 3

Here you can find the solution you need: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Good luck :)