css - 使 div 在另一个 div 之间拉伸(stretch)高度，如果溢出则滚动

Question

我有这样的 css 问题:

我有 3 个 div，假设它们都堆叠在一列中(就像 3 行的表格)，顶部和底部的有 height: 100px; 和 position:绝对； 例如，它们就像页眉和页脚，它们总是粘在我的表单的顶部和底部。

整个表单的高度可以根据表单中的其他元素而变化，所以我需要我的中间 div 刚好在其他 2 个 div 之间，如果它不适合它的内容，滚动。

(例如页眉和页脚是 100px 高度，表单只有 500px 高度，中间 div 中的文本非常非常长)<- 目前中间的 div 扩展并拉伸(stretch)了整个表单。

我已经尝试了很多方法来解决这个问题，包括元素的定位、边距、填充，但仍然没有成功……有人能帮我吗？谢谢!

Answer 1

你可以这样做: jsFiddle

CSS

.header, .footer {
    background-color: green;
    height: 100px;
    width: 100%;
}
.form {
    height: 300px;
    position: relative;
}
.content {
    position: absolute;
    top: 100px;
    bottom: 100px;
    overflow-y: scroll;
}
.footer {
    position: absolute;
    bottom: 0px;
}