2

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

预览

有两个限制：

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

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

4

2 回答 2

6

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

首先，分别定位 yourheader和footerusingabsolute和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*/
}
于 2012-09-08T07:14:51.483 回答
0

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

请注意，此设计未考虑：

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