Inner div to have height 100% inside a container of height auto

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.

Unfortunately, if you want to have a specific height on the container, every parent container must have a specified height of percent or units. — ahmed.hoban, Jan 27 '13 at 14:35

score 15 · Answer 1 · answered Jan 27 '13 at 14:40

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/

score 1 · Answer 2 · answered Jan 27 '13 at 14:39

1

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

Good luck :)

answered Jan 27 '13 at 14:39

score 0 · Answer 3 · answered Jan 27 '13 at 14:37

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/

Inner div to have height 100% inside a container of height auto

3 Answers3

Linked