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

Question

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

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

但我不能得到这样的滚动条。

我已经尝试了一些，这里是jsfiddle

在这个小提琴中，我还有：

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

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: scroll; 边距：60px 0；最小高度：400px;}

Answer 4

请参阅我的小提琴以获得整个逻辑小提琴 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());