Inner div to have height 100% inside a container o

Question

I'm struggling to get a div to expand fully to it's container's height.

Markup:

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

At different viewports .innerTwo's content is taller than that of .innerOne's but I would like it's background to be the same size as .innerTwo's

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 wont match up. I know it can be done by giving the container a set height but I don't want to do that since it's a responsive site. Is this possible? I'd rather not use JS.

Answer 1

You can find the desired solution here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Good luck :)

Answer 2

You can use display:table-cell property for 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 this http://jsfiddle.net/XXHTC/

Answer 3

This article discusses issues with aspect ratios and sizes in responsive media. It may not be the answer to your particular problem, but the section discussing the use of percentage padding has helped me on occasion. http://css-tricks.com/rundown-of-handling-flexible-media/