Как получить полосу прокрутки в div с фиксированным заголовком и нижним колонтитулом?

У меня есть веб-сайт и некоторые проблемы с полосой прокрутки.

Что я хочу, я лучше всего объясню этим изображением.

Но я не могу получить такую полосу прокрутки.

Я пробовал некоторые, вот jsfiddle

В этой скрипке у меня также есть:

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

Но это поле не в порядке, откуда я знаю, какой запас мне нужен, не зная высоты заголовка и нижнего колонтитула.

Ответ 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/

EDIT: добавлен забытый тег HTML в коде

Ответ 2

Вам нужно дать прокручиваемому элементу высоту, чтобы можно было вычислить положение полосы прокрутки.

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

http://jsfiddle.net/gkxV4/

Ответ 3

Попробуйте указать Min-height или height для этого div div [role = "main" ] {overflow-y: scroll; margin: 60px 0; мин-высота: 400px;}

Ответ 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());