I have a very simple structure:
<div class="parent">
<h1>Element taking space</h1>
<div class="stretch">
Not much content, but needs to be stretched to the end.
</div>
</div>
The parent div
has a set height, and I want div.stretch
to stretch all the way to that height, regardless of how little content it has. Using height: 100%
does the trick, until you add some other element which pushes the content down.
I guess that specifying height: 100%
means that the element should have the exact same absolute/computed height as the parent element, and not the remainder of the height after all the other elements have been computed.
Setting overflow: hidden
obviously hides the overflowing content, but that's not an option for me.
Is there any way I can achieve that in pure CSS?
You could float the h1 element. It would work no matter what height it is, and the content of the stretch element will be pushed below it. But I'm not entirely sure if this is what you are looking for.
EDIT: I'm not certain what kind of browser support you're looking for, but you could also set the display to table
on .parent
and then have .stretch
inherit
the height. Then you can nest the column divs inside of .stretch
and float them.
Updated: http://jsbin.com/oluyin/2/edit
HTML
<div class="parent">
<h1>Element taking space</h1>
<div class="stretch">
<div class="col">Not much content, but needs to be stretched to the end.</div>
<div class="col">Not much content, but needs to be stretched to the end.</div>
</div>
</div>
CSS
.parent {
display: table;
}
.stretch {
height: inherit;
}
.col {
float: left;
width: 50%;
}