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.

Is the header size predefined or its depend of header content length? — LJ Wadowski, Oct 24 '14 at 22:02

score 8 · Accepted Answer · edited Oct 26 '14 at 11:00

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>

This is a pretty good solution and it is also simple. Here's my extension of it per OP's specs: http://jsfiddle.net/zz12cwkf/. — DRD, Oct 24 '14 at 22:32
Wow, this solution was way simpler than I thought it would be. I guess I was overthinking it. Thanks very much! — JacobTheDev, Oct 25 '14 at 06:23

Salman A · Answer 2 · 2014-10-24T23:07:18.737

I have this solution (works for any number of columns as long as they fit):

Use inline blocks to center align the results
Use relative positioning to align the blocks with the bottom of blue box (requires top vertical align)
Move the green blocks out of the flow by making them absolute position (this leaves orange box in the flow which aligns with the bottom of blue box)

body {
  font: medium monospace;
}
.blue {
  background: #AAF;
  height: 12em;
  text-align: center;
}
.helper {
  display: inline-block;
  width: 10em;
  vertical-align: top;
  position: relative;
  top: 100%;
}
.green {
  background: #CFC;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
}
.orange {
  background: #FCA;
}

<div class="blue">
  <div class="helper">
    <div class="green">
      1<br/>2
    </div>
    <div class="orange">
      1<br/>2<br/>3
    </div>
  </div>
  <div class="helper">
    <div class="green">
      1<br/>2<br/>3
    </div>
    <div class="orange">
      1<br/>2<br/>3<br/>4<br/>5
    </div>
  </div>
  <div class="helper">
    <div class="green">
      1
    </div>
    <div class="orange">
      1<br/>2<br/>3<br/>4
    </div>
  </div>
</div>

score 0 · Answer 3 · answered Oct 24 '14 at 22:02

0

Try the following CSS rule: height: calc(100% - header_height);

answered Oct 24 '14 at 22:02

Ian Hazzard

7,661
7
34
60

1

Where does header height come from? – Salman A Oct 24 '14 at 22:03
Hmmmm. Does he not know his header heights? – Ian Hazzard Oct 24 '14 at 22:05
He said the header heights vary, how can you get them in css – xd6_ Oct 24 '14 at 22:07
Then you're right, that wouldn't work. Do you know how to do this a better way? I'm not sure how to do it if he doesn't know the header height. – Ian Hazzard Oct 24 '14 at 22:07
How would you calculate a header height? Does anyone know? – Ian Hazzard Oct 24 '14 at 22:08

Margin Top 100% - Height of Parent Div

3 Answers3