如何在具有固定页眉和页脚的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标记

Answer 2

您需要为可滚动元素指定一个高度，以便计算滚动条位置。

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

http://jsfiddle.net/gkxV4/

Answer 3

尝试提及此div的最小高度或高度 div [role =＆＃34; main＆＃34;] {overflow-y：scroll;保证金：60px 0;最小高度：400像素;}

Answer 4

查看我的小提琴，了解整个逻辑fiddle http://jsfiddle.net/MA9k3/7

Jquery代码：

var doc_height = $(window).innerHeight();

var header_height = $("header").height();
var footer_height = $("footer").height();

var div_height = doc_height - (header_height + footer_height);

$("#content").css({
    "height": (div_height - footer_height) + "px",
    "margin-bottom": footer_height + "px"
});

alert($("#content").height());