使用粘性页脚时 CSS 旁侧高度 100%

Question

我有一个带有标题和 sticky footer 的布局。两者都是 40px 高。现在我需要添加一个滚动条，它将填充可用空间(垂直)。它应该看起来像这样:

有两个限制:

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

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

Answer 1

这是我要解释的一个小演示:little link .

首先，分别使用绝对和固定定位页眉和页脚。在 body 的顶部和底部添加 40px 的内边距，并确保其 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*/
}