将可变高度子div与可变高度父div的底部对齐，而另一个子将其向下推

Question

标题可能比想法本身更复杂。下面是一张显示我需要的图片。有简单的规则：

• A是最小高度的div：800px;如果B + C> A（高度），那么A应该扩展以适合B和C.（标准行为）。
• B是高度可变的div 无论高度如何，都需要始终与A的顶部对齐 C。
• C是一个高度可变的div，需要始终对齐 无论B的高度如何，都在A的底部。
• B＆amp;的高度C由其内容决定（主要是文字）。

• 最左边的图像显示了当它的外观 B + C的高度<高度A.（最小高度800px适用）
• 中心图像显示如果B + C＆gt;会发生什么。 A（B已经成长 在高度上，C保持不变，因此，A也在高度上增长。）
• 最右边的图像显示了如果B + C＆gt;会发生什么。 A（B和B） C在高度上增长，因此，A也在高度上增长。

这是否可以使用纯HTML / CSS并且没有Javascript？执行环境没有Javascript功能（或者如果有，它是非常有限的功能），所以我可能不能依赖基于JS的解决方案。

我自己的第一次尝试是制作A position: relative;并制作C position:absolute; bottom: 0;但是当B增长时，它将与C重叠，因为C不再在页面流中。

然后我想给B一个min-height将C推到底部，但这不起作用，因为C没有固定的高度，这意味着我不能指定一个固定的{{ 1}}代表B。

我也试过制作A min-height，但这会推动B＆amp; C到底部。也许如果我可以让B填充其余可用空间，我可以使这种方法有效吗？

我创建了这个jsfiddle http://jsfiddle.net/376rp/，这样任何有想法的人都会有一个快速启动。请注意：那里有两个＆＃34; B＆＃34; -blocks（黄色背景）。正确的解决方案可能适用于任何数量的＆＃34; B＆＃34; -blocks。

Answer 1

这可能与纯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;
}

当内容变得太大时，实际上没有办法防止外部元素扩展。如果您的设备无法访问JS，则Flexbox也很有可能无法正常工作。

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

Answer 2

嗯，我知道你正在寻找一个纯CSS解决方案，但也许这可以帮到你。

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';
}