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

Question

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

有两个限制：

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

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

Answer 1

这是我要解释的一个小演示：little link。

首先，分别使用absolute 和fixed 定位您的header 和footer。在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*/
}

Answer 2

只有position: fixed，边距（42px 用于测试目的，因为，嗯，42 但实际上应该是 40px）和 #aside 内的额外 div，这里有一个小提琴：http://jsfiddle.net/PhilippeVay/xcuVv/2/ 在 Firefox 中工作、Chrome、Safari 4、IE8 和 Opera 11 或 12，但在 IE7 中失败，如果需要兼容性，则需要回退。

注意这个设计没有考虑到：

• 上网本或智能手机上的垂直空间
• 如果页眉和页脚占用超过 40 像素会发生什么情况（每个 WCAG 2.0 将文本缩放至 200%，在某些操作系统和浏览器上字体比平时大，等等）
• 在某些移动浏览器中几乎不可能进行内部滚动（进入旁边）
• 使用空格键或向下翻页键滚动一页的人现在将滚动一个半屏幕（80 像素太多），这会惹恼他们（错误，我们）。请允许您的条形图隐藏或缩小为单个按钮，然后通过简单地单击 JS 中管理的按钮返回条形图...