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

我正在研究一种布局，该布局放置在具有固定高度的包装中，并包含三个内部容器。

第一个容器（标头）应放在包装纸的顶部，并且高度灵活。

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

第三个容器（页脚）的高度也未知，需要随时将其放在包装纸的底部。

<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>

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


页脚在相对定位的包装器中的绝对位置：在这种情况下不起作用，因为我们不知道页脚的高度
flexbox模型：不可能，因为我需要支持IE8 +
table：内容行不会溢出，整个表都会溢出，并且页脚将位于包装器的外部
内容td元素的位置设置为相对并且包含div元素的位置设置为绝对（包含实际内容）的表：似乎可以解决大多数浏览器中的溢出问题，例如在IE9中，内容div（将高度设置为100％）导致高度为0


在不使用Java的情况下，还有其他选择可以在这里工作吗？

最佳答案

花了一段时间，但我相信就是这样，我将其从我的回答中改写到另一个问题。 .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;
}

关于html - 棘手的页脚和灵活的高度的棘手的盒子布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19846036/