小编Mar*_*arc的帖子

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

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