Вопрос по css, overflow – Прокрутить часть содержимого в контейнере с фиксированной позицией

54

у меня естьposition: fixed div в макете, в качестве боковой панели. Меня попросили, чтобы часть его содержимого была зафиксирована в верхней части (внутри), а остальная часть прокручиваласьif it overflows the bottom of the div.

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

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

<code>body {
    background: #eee;
    font-family: sans-serif;
}

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;
}</code>
<code><div class="sidebar">
    <div id="fixed">
        Fixed content here, can be of varying height using jQuery $.animate()        
    </div>

    <div id="scrollable">
        Scrolling content<br><br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div></code>

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

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

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

Почему боковая панель не может быть абсолютной или относительной позиции? Вы хотите, чтобы он прокручивал страницу правильно? Нет, поставить полосы прокрутки на боковой панели? Kevin Bowersox
Похоже, вы достигли некоторого прогресса в своей скрипке, если вы удалите свойство bottom в div # sidebar, то div расширится, чтобы соответствовать содержанию Kevin Bowersox
Извините, я забыл добавить, что в боковой панели не прокручивается, и всегда растягивается, чтобы соответствовать окну. Bojangles
Учитывая, что элемент без прокрутки находится в верхней части содержимого боковой панели, он не должен бытьposition: fixed - он может просто сидеть в нормальном потоке. Я хочу знать, есть ли способ подтолкнуть вершинуoverflow: scroll элемент вниз на высоту не прокручиваемого div. Это на самом деле неposition: fixed, Я имел в виду "исправлено" как в "не прокручивается с переполнением". Bojangles
Я не уверен, существует ли для этого чисто решение CSS. По сути, вы пытаетесь исправить div # fixed, однако, когда вы делаете это, вы убираете его из обычного потока документа, чтобы высота не давила другие элементы вниз по странице. Kevin Bowersox

Ваш Ответ

5   ответов
-1

max-size и добавитьoverflow-y: scroll; к его свойствам.

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

Извините, я забыл добавить, что боковая панель всегда растягивается, чтобы соответствовать окну, и не прокручивается вместе со страницей, поэтомуmax-size здесь не применимо. Bojangles
82

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

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

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

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

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

Также используйтеoverflow: auto вместо этого, поскольку он будет показывать только полосу прокрутки, если естьis переполнение.
Работает сpadding-top: 50px потому что синий заголовок точно 50px в высоту. Я хочу, чтобы этот заголовок имел переменную высоту, хотя становится очевидным, что единственный способ решить эту проблему - это использовать JavaScript, чего я не хотел бы делать. Bojangles
Freakin & APOS; блестящий.
это не работает со старыми браузерами, такими как Mobile Safari для iOS 4.2 или Android 2.3. Если у кого есть решение - опубликуйте его!
Для плавной прокрутки на iOS / Android, если вы испытываете медленную прокрутку, убедитесь, что вы установили-webkit-overflow-scrolling: touch... полезно в базовых приложениях кордова или других системах.
1

div#scrollable {
    overflow-y: scroll;
    max-height: 100vh;
}
0

height: 100% используется, контент выходит за границы, но когда это95% все в порядке:

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

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

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;
}

ДЕМО с двумя прокручиваемыми div

Похожие вопросы