html - 带有粘性页脚和灵活高度的棘手盒子布局

Question

我正在设计一个布局，它被放置在一个固定高度的包装器中，并包含三个内部容器。

第一个容器(header)应该放在 wrapper 的顶部，并且它的高度是灵活的。

第二个容器 (content) 的高度也很灵活，如果可用空间不足则需要溢出 (overflow-y: auto)。

第三个容器(footer)也有一个未知的高度，需要随时放在包装器的底部。

<div id="wrapper">
    <div id="header">
        <span>
            some unknown content that is placed at the top of the wrapper
        </span>
    </div>
    <div id="content">
        <span>
            some more unknown content and within here we want
            to enable vertical scrolling if necessary
        </span>
    </div>
    <div id="footer">
        <span>
            again unknown content that should be placed at the bottom of
            the wrapper at any time
        </span>
    </div>
</div>

到目前为止我已经排除的选项:

1. 绝对定位页脚在相对定位包装内:在这种情况下不起作用，因为我们不知道页脚的高度
2. flexbox 模型:不可能，因为我需要支持 IE8+
3. 表格:内容行不会溢出，整个表格会溢出，页脚会位于包装器之外
4. table with the content td element's position set to relative and including a div element with position set to absolute(包含实际内容):似乎解决了大多数浏览器中的溢出问题，但例如在 IE9 中，内容 div(高度设置为 100%)导致高度为 0

有没有其他不使用 Javascript 的选项可以在这里工作？

Answer 1

花了一段时间，但我相信就是这样，我根据我对另一个问题的回答改编了它。 .inner div 必须具有 height:100% 但其中的任何内容都应该能够根据需要进行修改。

http://jsfiddle.net/Z4K7J/2/

.left {
    border:1px solid orange;
    width:200px;
    height:300px;
    display:table;
}

.top {
    display:table-row;
}

.middle {
    display:table-row;
    height:100%;
}

.middle .inner {
    background-color:red;
    height:100%;
    overflow-y:auto;
}

.bottom {
    display:table-row;
}