Прокрутка части содержимого в контейнере с фиксированной позицией

У меня есть div position: fixed в макете, как боковая панель. Мне было предложено, чтобы часть его содержимого оставалась фиксированной до вершины (внутренне), а остальное прокручивалось, если оно переполняет нижнюю часть div.

Я посмотрел этот ответ, однако представленное там решение не работает с контейнерами position: fixed или position: absolute, что является болью.

Я сделал демонстрацию JSFiddle моей проблемы здесь. Большой объем текста должен идеально прокручиваться, а не переполняться в нижней части страницы. Высота заголовка может варьироваться в зависимости от содержимого и может быть анимирована.

Пример кода JSFiddle:

CSS

div.sidebar {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 280px;
}

div#fixed {
    background: #76a7dc;
    padding-bottom: 10px;
    color: #fff;
}

div#scrollable {
    overlow-y: scroll;
}

HTML:

<div class="sidebar">
    <div id="fixed">
        Fixed content here, can be of varying height using jQuery $.animate()        
    </div>

    <div id="scrollable">
        Potentially long content
    </div>
</div>

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

div.sidebar должен оставаться position: fixed, и я бы очень хотел сделать это без каких-либо взломов, а также сделать его как можно более удобным. Я пытался делать разные вещи, но никто из них не работает, и я не уверен, что отсюда.

Как я могу сделать div внутри контейнера position: fixed прокручивать только в направлении Y, когда содержимое переполняет содержащий div, с фиксированным заголовком переменной неопределенной высоты? Я очень хотел бы держаться подальше от JS, но если мне придется его использовать, я буду.

Ответ 1

Кажется, что если вы используете

div#scrollable {
    overflow-y: scroll;
    height: 100%;
}

и добавьте padding-bottom: 60px в div.sidebar.

Например: http://jsfiddle.net/AKL35/6/

Однако я не уверен, почему это должно быть 60px.

Кроме того, вы пропустили f от overflow-y: scroll;

Ответ 2

Я изменил прокручиваемый div на абсолютную позицию, и все работает для меня

div.sidebar {
    overflow: hidden;
    background-color: green;
    padding: 5px;
    position: fixed;
    right: 20px;
    width: 40%;
    top: 30px;
    padding: 20px;
    bottom: 30%;
}
div#fixed {
    background: #76a7dc;
    color: #fff;
    height: 30px;
}

div#scrollable {
    overflow-y: scroll;
    background: lightblue;

    position: absolute;
    top:55px; 
    left:20px;
    right:20px;
    bottom:10px;
}

DEMO с двумя прокручиваемыми div

Ответ 3

На самом деле это лучший способ сделать это. Если используется height: 100%, содержимое уходит с границы, но когда оно 95% все в порядке:

div#scrollable {
    overflow-y: scroll;
    height: 95%;
}

Ответ 4

Установите для прокручиваемого div значение max-size и добавьте overflow-y: scroll; к нему.

Изменить: попытка заставить jsfiddle работать, но не прокручивается правильно. Это займет некоторое время, чтобы понять.