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

Question

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

у меня есть position: fixed div в макете, как боковая панель. Меня попросили, чтобы часть его содержимого оставалась фиксированной в верхней части (внутренне), а остальное прокручивать если он переполняет нижнюю часть 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, но если мне придется его использовать, я это сделаю.

466 5

css overflow

5 ответов:

Comments

Ничего не найдено.

FrogInABox · Accepted Answer · 2012-04-19 22:10:40

это, кажется, работает, если вы используете
div#scrollable {
    overflow-y: scroll;
    height: 100%;
}
и добавить padding-bottom: 60px to div.sidebar.

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

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

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

Dmitri Algazin · Accepted Answer · 2014-04-30 19:05:49

Я изменил прокручиваемый 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;
}
демо с двумя прокручиваемыми дивами

Vasil · Accepted Answer · 2017-01-25 20:51:41

на самом деле это лучший способ, чтобы сделать это. Если содержимое выходит за границы, но когда это 95% все в порядке:
div#scrollable {
    overflow-y: scroll;
    height: 95%;
}

Julien · Accepted Answer · 2018-06-15 12:13:47

что сработало для меня :
div#scrollable {
    overflow-y: scroll;
    max-height: 100vh;
}

Harry · Accepted Answer · 2012-04-14 18:05:55

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

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