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

Question

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

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

Я хотел бы получить решение с использованием CSS или jQuery, пожалуйста. Для примера JSFiddle см. Мой комментарий ниже.

Answer 1

Это должно быть довольно просто. Пример JSFiddle.

Во-первых, я положил ваш свободный текст div внутри <p> элемент, и удалил поле по умолчанию этого <p> элемент. Затем я изменил overflow: scroll; в overflow-y: scroll; и переместил его в этот новый <p> элемент. Наконец, я дал <p> элемент явный height: 300px;, который является высотой родительского элемента, минус высота верхнего и нижнего колонтитула.

HTML:

<div class="outside">
    <div class="inside">inside1 Top should not scroll</div>
    <p>Your Text Here</p>
    <div class="inside2">inside 2 Bottom should not scroll</div>
</div>

CSS:

.outside {
    width: 400px;
    height: 400px;
    background-color: #EEE;
    border: 1px solid black;
}
.outside p {
    overflow-y: scroll;
    margin: 0;
    height: 300px;
}
.inside {
    border: 1px solid #000;
    background-color: #000;
    color: #FFF;
    height: 50px;
}
.inside2 {
    bottom: 2px;
    border: 1px solid #000;
    background-color: #000;
    color: #FFF;
    height: 50px;
}