CODEWITHSUNDEEP
htmlcsspositionscrollbarmove
Nolog Lester
Nolog Lester

Reputation: 135

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

Upvotes: 3

Views: 3855

Answers (3)

N Djel Okoye
N Djel Okoye

Reputation: 1078

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

Upvotes: 0

Chris Andersson
Chris Andersson

Reputation: 1301

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

Upvotes: 2

Vladimir Gordienko
Vladimir Gordienko

Reputation: 3470

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

Upvotes: 0

Related Questions