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

时间:2013-11-07 20:29:07

标签: html css css-tables

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

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

第二个容器(内容)的高度也很灵活,如果可用空间不足(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. ,所以不可能
  4. 表格:内容行不会溢出,整个表格会溢出,页脚将位于包装器之外
  5. 表格,内容td元素的位置设置为相对,并包括位置设置为绝对的div元素(包含实际内容):似乎解决了大多数浏览器中的溢出问题,但是在IE9中,内容div(高度设置为100%)导致高度为0
  6. 如果没有使用可能在这里工作的Javascript,还有其他选择吗?

1 个答案:

答案 0 :(得分: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;
}