复杂的动态高度溢出自动布局

Question

我确信这方面有一个简单的解决方案，但我可能一直在寻找它，以至于我在思考所有事情。

请参阅http://codepen.io/anon/pen/fusiw

我的页面上有一个绝对定位的div（为简单起见，它在codepen的所有边缘都是0）。内部有三个主要元素：

• 标题，根据内容可以是任意高度，并且应始终固定在父标题的顶部;
• 一个页脚，谢天谢地，它有一个固定的高度，应该总是固定在父母的底部;
• 并且中间区域可以包含任何数量的内容，应该从标题的末尾到页脚的开头，并且应该在需要时滚动。

我的问题是让中间区域始终从标题的末尾开始，并在页脚之前结束。它应该完全适合页眉和页脚之间的任何高度。

我不希望滚动条出现在中间区域本身以外的任何地方。我当前的解决方案是在只有中间区域滚动的意义上工作，但因为我正在使用height: 100%，所以标题的高度会添加到它，这不应该发生。