Wie erhalten Sie eine Bildlaufleiste in einem Div mit fester Kopf- und Fußzeile?

Question

Ich habe eine Website und einige Probleme mit der Bildlaufleiste.

Was ich will, kann ich am besten mit diesem Bild erklären.

Aber ich kann die Scrollbar wie diese nicht erhalten.

ich einige versucht haben, hier ist die jsfiddle

In dieser Geige Ich habe auch:

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

Aber dieser Spielraum ist nicht in Ordnung, wie kann ich wissen, welche Marge ich brauche, ohne den Header zu wissen und Fußhöhe.

Answer 1

Dies kann durch die Verwendung von padding und box-sizing = border-box auf body (mit Körperhöhe 100% wird Padding in Höhe zählen, so dass die Box mit scroll wird genau zwischen Kopf- und Fußzeile)

html { 
overflow: hidden; 
height: 100%; 
} 

body { 
padding: 60px 0px; 
height: 100%; 
box-sizing: border-box; 
} 

div[role="main"] { 
overflow-y: scroll; 
height: 100%; 
} 

siehe http://jsfiddle.net/wPucQ/

EDIT: Hinzugefügt vergessen HTML-Tag in Code

Answer 2

Versuchen Sie, Min-Höhe oder Höhe für dieses Div zu erwähnen Div [Role = "Main"] {Überlauf-y: scroll; Rand: 60px 0; min-height: 400px;}

Answer 3

Sie müssen den rollbaren Element eine Höhe geben, so kann die Scroll-Leiste Position berechnet werden.

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

http://jsfiddle.net/gkxV4/

Answer 4

meine Geige Siehe ganze Logik fiddle http://jsfiddle.net/MA9k3/7

JQuery-Code:

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