Как я могу иметь прокручиваемое тело с фиксированным верхним и нижним колонтитулами внутри контейнера div? используя jQuery

Я хотел бы добавить нижеприведенный комментарий, но из-за низкой репутации я не смог этого сделать.

Взгляните на следующие jsfiddles:

1) http://jsfiddle.net/davidpauljunior/g2ydV/8/

2) http://jsfiddle.net/yASFU/

Стиль:

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

Вы можете добавить еще один внутренний div для хранения содержимого и установить на нем overflow-y: scroll, чтобы прокручивалось только содержимое, а не верхний и нижний колонтитулы. Вот модифицированная версия вашей скрипки, чтобы проиллюстрировать эту концепцию:

http://jsfiddle.net/jwnace/vtuv6wh6/

Просто добавьте position:fixed; к необходимым элементам CSS. Итак, CSS должен выглядеть примерно так:

  .inside {
    top: 2px;
    border: 1px solid #000;
    background-color: #000;
   color: #FFF;
   height:50px;
   position:fixed;

  }

  .inside2 {
    bottom: 2px;
    border: 1px solid #000;
    background-color: #000;
   color: #FFF;
   height:50px;
   position:fixed;
  }

Дополнительная информация Обновлен fiddle, чтобы отразить то же самое.