Search code examples
htmlcsspositionscrollbarmove

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:

scrollbar

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:

scrollbar_2

Solution

  • 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;
}​