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

Question

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

我想用这张图最好地解释一下。

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

我尝试了一些，这里是jsfiddle

在这个小提琴中我也有：

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

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

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

Answer 2

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

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

http://jsfiddle.net/gkxV4/

Answer 3

尝试提及此 div 的最小高度或高度 div[role="main"]{ overflow-y: 滚动；边距：60px 0；最小高度：400px;}

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());