使用粘性页脚时，CSS高度为100％

Question

我有一个标题和sticky footer的布局。两者都是40px高。现在我需要添加一个scroolbar，它将填充自由空间（verticaly）。看起来应该是这样的：

有两个限制：

• 没有JavaScript
• 没有CSS3 calc（）函数

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

Answer 1

以下是我要解释的内容的一个小演示：little link。

首先，分别使用header和footer定位absolute和fixed。将40px填充添加到body的顶部和底部，并确保其box-sizing为border-box。将aside的{​​{1}}设置为height，并确保它是100%。基本上;

HTML：

border-box

CSS：

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

Answer 2

只有position: fixed，边距（42px用于测试目的，因为，42，但它应该真的是40px）和一个额外的div #aside，这里是一个小提琴：{{3可以在Firefox，Chrome，Safari 4，IE8和Opera 11或12中使用但在IE7中失败，如果需要兼容性，则需要回退。

请注意此设计未考虑：

• 上网本或智能手机上的垂直空间
• 如果页眉和页脚占用超过40px（每个WCAG 2.0缩放文本高达200％，某些操作系统和浏览器上的字体比平常更大等），会发生什么情况。
在一些移动浏览器中，
• 内部滚动（放在一边）几乎是不可能的
• 使用空格或向下翻页键来滚动一个页面的人现在将滚动一个半屏幕（80px太多），这将使他们烦恼（错误，我们）。请通过简单点击JS中管理的按钮，将您的酒吧隐藏或缩小为一个按钮并返回酒吧...