如何获得与固定的页眉和页脚一个div的滚动条？(How to get a scrollbar in

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

我想我最好能与此图像解释。

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

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

在这拨弄我也有：

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

但这种利润率也不行，我怎么知道我需要什么保证金不知道页眉和页脚的高度。

Answer 1:

这可以通过使用填充和箱上浆=体上边界框被减慢（与身体高度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 [角色=“主要”] {溢出-γ：滚动; 余量：60像素0; 最小高度：400像素;}

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

文章来源: How to get a scrollbar in a div with fixed header and footer?