0

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

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

第二个容器 ( content ) 的高度也很灵活，如果可用空间不足 ( 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>

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

  1. 页脚在相对定位包装器中的绝对定位：在这种情况下不起作用，因为我们不知道页脚的高度
  2. flexbox 模型：不可能，因为我需要支持 IE8+
  3. table：内容行不会溢出，完整的表会溢出，页脚将位于包装器之外
  4. 表格内容 td 元素的位置设置为相对，并包括一个位置设置为绝对的 div 元素（包含实际内容）：似乎修复了大多数浏览器中的溢出问题，但例如在 IE9 中的内容 div（高度设置为 100 %) 导致高度为 0

在不使用 Javascript 的情况下是否有其他选项可以在这里工作？

4

1 回答 1

1

花了一段时间，但我相信就是这样，我从我对另一个问题的回答中改编了它。.innerdiv 必须有，但它里面的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;
}
于 2013-11-08T14:27:34.703 回答