Align Variable Height Child Div To Bottom Of Variable Height Parent Div, While Another Child Pushes It Down

The title is probably more complex than the idea itself. Below is an image showing what I need. There are simple rules: A is a div with min-height: 800px; if B+C>A (in height),

Solution 1:

This is probably as close as you'll get with pure CSS:

http://codepen.io/cimmanon/pen/zALfo

<div class="paper">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
</div>

.paper {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.paper .footer {
  margin-top: auto;
}

There isn't really a way to prevent the outer element from expanding when its contents get too big. If your device doesn't have access to JS, there's a pretty good chance Flexbox won't work either.

http://caniuse.com/#feat=flexbox

Solution 2:

Well, I know you are looking for a pure CSS solution but maybe this could help you.

http://jsfiddle.net/coma/kb6nW/6/

HTML

<div class="a">
    <div class="b"></div>
    <div class="c"></div>
</div>

JS

var margin = 10;
var minHeight = 250 + margin;
var as = document.getElementsByClassName('a');
var i;

for(i = 0; i < as.length; i++) {

    var height = minHeight - as[i].offsetHeight;
    var x = as[i].getElementsByClassName('b')[0];

    x.style.marginBottom = Math.max(margin, height) + 'px';
}