Margin Top 100% - Height of Parent Div

Question

I have the following layout to build:

Basically, I need three divs of varying height with varying header heights to be positioned 100% from the top of their parent, minus the height of the header. I could do this with jQuery, but this is a responsive site, so I'd like to keep it as CSS-based as possible (otherwise I'll have to deal with $(window).resize(), which in my experience can be unreliable).

Is this possible, maybe using the CSS3 calc feature?

Thanks.

Answer 1

So you can try add content (orange container) stick to the bottom off the blue container (depends of your html structure you can use position: absolute , or margin-top in orange container).

Than you can put header (green) container inside orange container and put it position absolute top -100% (orange position has to be absolute or relatve).

If you will add your html than it will be easy to find more precise solution.

JSFIDDLE with an example

CSS:

.box{
   background: #f00;
   height: 150px;
   width: 100%;
   position: relative;
   padding: 20px;
   padding-bottom: 0;
}
.column{
    background: #0f0;
    width: 30%;
    position: relative;
    top: 100%
}
.header{
    position: absolute;
    bottom: 100%;
    width: 100%;
    background: #00f;
 }

HTML:

<div class="box">
    <div class="column">
        <div class="header">
           header 
        </div>
        aaaaaaa<br/>
        aaaaaa
    </div>    
</div>