html - 如何在具有固定页眉和页脚的 div 中获取滚动条？

Question

我有一个网站，滚动条有一些问题。

我想要的我可以用这张图片最好地解释。

但是我无法像这样获得滚动条。

我试过一些，这里是jsfiddle

在这个 fiddle 中我还有:

div[role="main"]
{
    overflow-y: scroll;
    margin: 60px 0;
}

但是这个边距不行，我不知道页眉和页脚高度怎么知道我需要多少边距。

Answer 1

这可以通过在 body 上使用 padding 和 box-sizing = border-box 来减慢(当 body 高度为 100% 时，它会将 padding 计入高度，因此带滚动的框将恰好位于页眉和页脚之间)

html {
 overflow: hidden;
 height: 100%;
}

body {
 padding: 60px 0px;
 height: 100%;
 box-sizing: border-box;
}

div[role="main"] {
 overflow-y: scroll;
 height: 100%;
}

参见 http://jsfiddle.net/wPucQ/

编辑:在代码中添加了被遗忘的 HTML 标签