固定页眉，页脚在灵活的固定位置容器内

Question

在灵活的固定位置容器内实现固定页眉/页脚和可滚动区域的最简洁方法是什么？ （例如：http://cl.ly/image/293F0f3D1R2B）

假设容器的CSS类似于：

#modal {
    position: fixed;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

Answer 1

Something like this?

我使用position: absolute;而不是修复。

Answer 2

对其他可能需要类似的人进行跟进。

我发现的最简单的CSS方法是将可滚动区域绝对放在绝对容器内，并设置top和bottom属性，使其伸展以填充可用区域。 （为此，您需要知道页眉和页脚的高度。）

工作示例+演示：http://codepen.io/stuntbox/pen/lEdpq