CSS: Scrollbar starts few pixels below the window

问题

I'd like to have my header fixed: header is always at the top of page and my whole content (everything including footer) could be scrolled. Header is 60 px high as you can see below and it's not the problem to make it fixed at the top.

The problem I want to solve (using only CSS) is to have scrollbar starting below these 60 pixels from the top. As you can see, the bottom of the scrollbar (2. arrow) is actually hidden/moved down. I guess by my problematic 60px. So it goes like this:

HTML:

<!DOCTYPE html>
<head>
...
</head>

<body>
    <header>
        ...
    </header>

    <div id="content">
        ...
    </div>
</body>
</html>

CSS:

html, body {
    height: 100%;
}

body {
    background: #d0d0d0;
    overflow-y: hidden; 
}

header { 
    background: #fff;
    height: 60px;
    width: 100%;

    position: fixed;
    top: 0;
}


#content {
    margin-top: 60px;
    height: 100%; 
    width: 100%;

    overflow-y: scroll;
}

What am I missing in my CSS? Thanks guys.

// Edit as a reply to the forst answer here (to John Grey)

Commentary below your comment:

回答1:

Here is a jsfiddle how to solve your problem: http://jsfiddle.net/sTSFJ/2/

Here is the css:

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#wrapper {
    width: 100%;
    height: 100%;
    margin: auto;
    position: relative;
}

#header {
    height: 40px;
    background-color: blue;
    color: #fff;
}

#content {
    position:absolute;
    bottom:0px;
    top: 40px;
    width:100%;
    overflow: scroll;
    background-color: #fff;
    color: #666;
}

回答2:

Your #content height is equal body height, but you have a header so... Try use this:

html, body {
    height: 100%;
}

body {
    background: #d0d0d0;
    overflow-y: hidden; 
}

header { 
    background: #fff;
    height: 5%;
    width: 100%;

    position: fixed;
    top: 0;
}


#content {
    margin-top: 5%;
    height: 95%; 
    width: 100%;

    overflow-y: scroll;
}

回答3:

You can solve this using the calc property. That is instead of height 95%, since you don't know if 5% == 60px rather do the following:-

#content {
    margin-top: 5%;
    height: calc(100%-60px); 
    height: -webkit-calc(100%-60px); /*For webkit browsers eg safari*/
    height: -moz-cal(100%-60px); /*for firefox*/
    width: 100%;
    overflow-y: scroll;
}

来源：https://stackoverflow.com/questions/13193197/css-scrollbar-starts-few-pixels-below-the-window

标签

html

css

position

scrollbar

move