Верхний и нижний колонтитулы с фиксированной позицией, а контент прокручивается?

Question

Я пытаюсь создать сайт, на котором верхний и нижний колонтитулы имеют фиксированную позицию, а свитки контента посередине.

<header style="position:fixed"></header> 
<div id="content">some content</div> 
<footer style="position:fixed"></footer> 

Я создал то, что думал, будет работать, но это не так. Вот jsFiddle со всем этим. Как вы можете видеть, часть содержимого скрыта под нижним колонтитулом и далее (я не вижу «HELLOWEEN» в конце). Что я должен изменить, чтобы исправить это? Thanx

Answer 1

Самое простое решение этого заключается в том, чтобы добавить отступ, эквивалентную высоту вашего статического колонтитулов:

#content { 
    width: 80%; 
    margin: 0 auto; 
    padding: 60px 0; 
} 

JSfiddle

Answer 2

1. удалить стили позиции на верхний и нижний колонтитулы
2. установить высоту по содержанию
3. добавить стиль переполнения-y: авто к содержанию

Если вы хотите, чтобы высота содержимого, чтобы соответствовать окно браузера (меньше верхнего и нижнего колонтитула), использовать JavaScript, чтобы установить его (и настроить в окне изменения размера событий)

Answer 3

http://jsfiddle.net/yASFU/

<header>header</header> 
<section> 
    <div class="push">push</div> 
</section> 
<footer>footer</footer> 

html, body {height:100%; margin:0; overflow:hidden;} 
header, footer {display:block; background-color:black; height:10%;} 
section {height:80%; background-color:lightblue; display:block; overflow:auto;} 
section .push {height:4000px;}