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.