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

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

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

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

Ответы

Ответ 1

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

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

JSfiddle

Ответ 2

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

Ответ 3

  • удалить стили позиции на верхнем и нижнем колонтитуле
  • установить высоту содержимого
  • добавить стиль переполнения-y: автоматически для содержимого

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