标题可能比想法本身更复杂。以下是显示我需要的图像。有简单的规则：
A是最小高度为div的div：800px；如果B + C> A（在高度上），则A应该扩展以适合B和C。（标准行为）。
B是高度可变的div
并且无论高度如何，都必须始终与A的顶部对齐
C。
C是高度可变且始终需要对齐的div
不论A的高度如何，都应位于A的底部。
B和C的高度取决于其内容（大部分为文本）。
最左边的图像显示了当
B + C 中心图像显示了如果B + C> A（B已增长
在高度上，C保持不变，因此A的高度也增加了）。
最右边的图像显示了如果B + C> A（B和C
C的高度增加了，因此A的高度也增加了。
使用纯HTML / CSS而没有Java脚本是否有可能？执行环境不具有Javascript功能（或者，如果具有，则是非常有限的功能），因此我可能无法依赖基于JS的解决方案。
我自己的第一个尝试是制作A position: relative;并制作C position:absolute; bottom: 0;，但是随后当B增大时，它将与C重叠，因为C不再在页面流中。
然后我考虑给B一个min-height来将C推到最底端，但是由于C的高度没有固定值，所以这也不起作用，这意味着我无法为B指定一个固定的min-height。
我也尝试过制作A display: table-cell; vertical-align: bottom;，但是那样会把B＆C推到最底下。也许如果我可以让B填充剩余的可用空间，那么我可以使这种方法起作用吗？
我创建了这个jsfiddle http://jsfiddle.net/376rp/，以便任何有想法的人都能快速入门。请注意：那里有两个“ B”块（背景为黄色）。正确的解决方案应该可以与任意数量的“ B”块一起使用。
最佳答案
这可能与使用纯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