使用粘性页脚时,CSS高度为100%

Question

我有一个标题和粘性页脚的布局.两者都是40px高.现在我需要添加一个scroolbar,它将填充自由空间(verticaly).看起来应该是这样的:

有两个限制:

• 没有JavaScript
• 没有CSS3 calc()函数

这个问题有没有严格的CSS解决方案？

Answer 1

这里有一个我要解释的小演示:小链接.

首先,分别定位header和footer使用absolute和fixed.40px在顶部和底部添加填充body,并确保它box-sizing是border-box.设置您aside的height到100%,也确保它的一个border-box.基本上;

HTML:

<header>
    I'm a header!
</header>
<aside>
    Lots and lots and lots of content!
    Glee is awesome!
</aside>
<footer>
    I'm a footer!
</footer>

CSS:

html {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
}
body {
    padding-top: 40px;
    padding-bottom: 40px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
}
header {
    height: 40px;
    width: 100%;
    position: absolute;
    top: 0px;
}
footer {
    height: 40px;
    width: 100%;
    position: fixed;
    bottom: 0px;
}
aside {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    overflow: auto; /*make sure there are scrollbars when needed*/
}