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

Question

У меня есть один контейнер с двумя дочерними элементами внутри него. Я хочу разместить одного ребенка сверху и другого ребенка в нижней части контейнера. Средняя часть (содержимое) должна прокручиваться между верхним и нижним дочерними элементами.

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

Я бы хотел получить решение с помощью CSS или jQuery. Пример JSFiddle см. В моем комментарии ниже.

Answer 1

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

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

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

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

Стиль:

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

Answer 2

Просто добавьте 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; 
    } 

Further read Обновлено fiddle, чтобы отразить то же самое.

Answer 3

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

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