Inner div to have height 100% inside a container of height auto
32,318
Solution 1
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/
Solution 2
You can find the desired solution here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Good luck :)
Author by
Adam Waite
I make iOS apps in East London. I make web apps occasionally too, mainly with Rails and JS.
Updated on July 09, 2022Comments
-
Adam Waite almost 2 years
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
'sStyles:
.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.