Прокрутка только боковой панели в гибком содержимом
У меня есть обертка, который содержит два дивы. Я хочу, чтобы содержание был исправлен, поэтому его нельзя было прокручивать. Боковая панель содержит список имен пользователей, поэтому она имеет большой контент с помощью прокрутки у.
Я пробовал много чего, например, добавил дисплей: авто;, но он продолжает прокручивать всю страницу.
Вот как выглядит мой HTML-файл.
<div class = "wrapper">
<!-- Sidebar -->
<div id = "sidebar">
<div class = "sidebar-header"></div>
<div class = "sidebar-filter"></div>
<ul class = "list-unstyled components"></ul>
</div>
<!-- Page Content -->
<div id = "content">
CONTENT
</div>
</div>
А вот и CSS-файл.
.wrapper {
display: flex;
width: 100%;
align-items: flex-start;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
Хотя это выглядит очень просто, но я застрял в этой проблеме на 2 дня.
Боковая панель будет содержать список ul имен пользователей (например, более 600), и это выглядит некрасиво, если вы прокручиваете весь браузер (включая контент), а не только боковую панель.
Это не работает в Safari.
Ответы 1
Используйте overflow-y: scroll; и установите фиксированный height (например: height: 120px;) на #sidebar
РЕДАКТИРОВАТЬ!
на ваш комментарий
I want the sidebar to be in full height,
использовать height:100vh
.wrapper {
display: flex;
width: 100%;
align-items: flex-start;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
overflow-y: scroll;
height: 100vh;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}<div class = "wrapper">
<!-- Sidebar -->
<div id = "sidebar">
<div class = "sidebar-header"></div>
<div class = "sidebar-filter"></div>
<ul class = "list-unstyled components">
<li>user name</li>
<li>user name</li>
<li>user name</li>
<li>user name</li>
<li>user name</li>
<li>user name</li>
<li>user name</li>
<li>user name</li>
</ul>
</div>
<!-- Page Content -->
<div id = "content">
CONTENT
</div>
</div>что ты имеешь в виду?
да, именно это я имел в виду, но я хочу, чтобы боковая панель была в полный рост, как мне это сделать? Пытался использовать растянутый флекс, но не работает, спасибо за поддержку.
он по-прежнему не подходит для браузера
так что попробуйте height:100vh
Рад был помочь :)
Вы не очень четко объясняете желаемое поведение - такие вещи, как «y scroll» и «fixed» очень абстрактны, я напишу ответ, но было бы неплохо, если бы вы отредактировали свой вопрос и объяснили, например, как должна вести себя боковая панель - какова связь между ее высотой и высотой ее родительского и других элементов-предков? То же самое для элемента содержимого.