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

<divclass="paper"><divclass="header"></div><divclass="body"></div><divclass="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

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

JS

var margin = 10;
var minHeight = 250 + margin;
varas = 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';
}