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

Question

我有一个网站和滚动条的一些问题.

我想要的最好用这张图片来解释.

但是我不能像这样得到滚动条.

我试过一些,这里是jsfiddle

在这个小提琴我也有:

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

但是这个边距不行,如何在不知道页眉和页脚高度的情况下知道我需要什么边距.

Answer 1

这可以通过在主体上使用填充和box-sizing = border-box来减慢速度(主体高度为100%,它会将填充计入高度,因此带有滚动的框将精确地位于页眉和页脚之间)

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标记