CSS: полоса прокрутки начинается с нескольких пикселей ниже окна

Я хочу, чтобы мой заголовок исправлен: заголовок всегда находится в верхней части страницы, и весь контент (включая нижний колонтитул) можно прокручивать. Заголовок имеет высоту 60 пикселей, как вы можете видеть ниже, и это не проблема, чтобы зафиксировать ее вверху.

Проблема, которую я хочу решить (используя только CSS), , чтобы иметь прокрутку, начиная с этих 60 пикселей сверху. Как вы можете видеть, нижняя часть полосы прокрутки (2. стрелка) на самом деле скрыта/перемещена вниз. Я думаю, по моему проблемному 60px. Итак, это происходит следующим образом:

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

Что мне не хватает в моем CSS? Спасибо, ребята.

// Изменить как ответ на форст-ответ здесь (Джон Грей)

Комментарий ниже вашего комментария:

Ответ 1

Вот как решить вашу проблему: http://jsfiddle.net/sTSFJ/2/

Вот 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

Ваша высота #content равна высоте тела, но у вас есть заголовок, поэтому... Попробуйте использовать это:

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

Вы можете решить это, используя свойство calc. Это вместо высоты 95%, так как вы не знаете, если 5% == 60px скорее сделают следующее: -

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