Для создания прокручивающегося блока в CSS можно использовать свойство overflow. При значении overflow: auto или overflow: scroll, если содержимое блока не помещается в заданные размеры, то появляется полоса прокрутки.
Например, чтобы создать блок с фиксированными размерами, который будет прокручиваться по вертикали, можно использовать следующий код:
HTML:
<div class="scroll-container">
<div class="scroll-content">
<p>Здесь находится контент, который может не помещаться полностью в блоке</p>
</div>
</div>
CSS:
.scroll-container {
width: 300px;
height: 200px;
overflow: auto; /* добавляем полосу прокрутки в случае необходимости */
border: 1px solid #ccc; /* добавляем рамку для блока */
}
.scroll-content {
width: 100%; /* устанавливаем ширину контента равной 100% блока */
}
Сначала мы создаем контейнер (div) с классом scroll-container и задаем фиксированные размеры этому блоку. Далее, добавляем полосу прокрутки с помощью свойства overflow. Устанавливаем рамку для блока, чтобы он был виден на странице.
Внутри контейнера создаем еще один элемент (div) с классом scroll-content, в который помещаем контент, который может не помещаться полностью в блоке.
Задаем ширину контента равной ширине контейнера (100%) и он будет как раз подстраиваться под размеры блока scroll-container.
Теперь, если контента много и он не помещается в блоке, появится полоса прокрутки, с помощью которой можно просматривать скрытый контент.
