Question

我正在处理一个布局，该布局放置在一个固定高度的包装器中，并包含三个内部容器。

第一个容器（标题）应该放在包装器的顶部，并且在它的高度上是灵活的。

第二个容器（内容）的高度也很灵活，如果可用空间不足（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 +
表格：内容行不会溢出，整个表格会溢出，页脚将位于包装器之外
表格，内容td元素的位置设置为相对，并包括位置设置为绝对的div元素（包含实际内容）：似乎解决了大多数浏览器中的溢出问题，但是在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;
}

棘手的盒子布局与粘性页脚和灵活的高度

1 个答案: