使div填充剩余的动态高度并滚动而不使用javascript

Question

我有一个文档结构,保持页面顶部的页眉和底部的页脚.只要中间的内容小于窗口的高度,它就能正常工作.如果内容太长,页脚会在页面下方进一步向下推,并显示一个完整的滚动条.如何将滚动条限制为内容DIV.

请注意,页眉和页脚的内容不固定,因此我不知道这些元素的高度,并且无法将内容元素的顶部位置设置为固定值.我在示例中添加了一个显示/隐藏功能来演示这一点.

我试图在纯CSS中解决这个问题(避免使用Javascript).我知道使用javascript,我可以监视窗口大小和元素可见性的变化,我可以计算页眉和页脚的高度,并为内容元素设置固定的尺寸.但是有没有非JavaScript的解决方案？

http://jsfiddle.net/sA5fD/1/

html { height: 100%; }
body {      
    padding:0 0;
    margin:0 0;
    height: 100%;
}
#main {
    display:table;
    height:100%;
    width:100%;
}
#header, #footer {
    display:table-row;
    background:#88f;
}
#more {
    display: none;
}
#content {
    display:table-row;
    height:100%;
    background:#8f8;
}

它适用于所有现代浏览器,台式机,平板电脑和手机.对于旧版浏览器,全身滚动条就可以了.

Answer 1

如果添加两个换行块:

<div id="content">
  <div id="content-scroll-wrap">
    <div id="content-scroll">
      content...

然后使用CSS:

#content-scroll-wrap {
    position: relative;
    height: 100%;
}
#content-scroll {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    overflow: auto;
}

http://jsfiddle.net/sA5fD/8/

不知道旧浏览器中的支持.IE可能需要一些修复.