Как сделать div вертикально прокручиваемым с помощью CSS

Вы всё правильно поняли, за исключением использования неправильного свойства. Полосу прокрутки можно активировать с помощью любого из свойств overflow, overflow-x или overflow-y, и каждое из них может принимать значения visible, hidden, scroll, auto или inherit. В данный момент вы рассматриваете две настройки:

• auto - Это значение проверяет ширину и высоту блока. Если они определены, оно не позволит блоку превышать эти границы. Если же содержимое превышает установленные границы, будет создана полоса прокрутки для одной из границ (или обеих), превышающая свою длину.
• scroll - Это значение принудительно создает полосу прокрутки, независимо от того, превышает ли содержимое установленные границы. Если прокрутка не нужна, полоса будет выглядеть как "неактивная" или неинтерактивная.

Если вы всегда хотите, чтобы вертикальная полоса прокрутки отображалась:

Необходимо использовать overflow-y: scroll. Это принудительно отображает полосу прокрутки по вертикали, независимо от необходимости. Если прокрутка в контексте невозможна, полоса будет выглядеть как "неактивная".

Если вы хотите, чтобы полоса прокрутки появлялась только при наличии необходимости:

Используйте overflow: auto. Поскольку содержимое по умолчанию просто переносится на следующую строку, когда не помещается в текущую, горизонтальная полоса прокрутки не будет создаваться (если это не элемент, у которого отключен перенос слов). Что касается вертикальной полосы, она позволит содержимому расшириться до указанной вами высоты. Если оно превышает эту высоту, будет показана вертикальная полоса прокрутки для просмотра оставшегося содержимого, но если высота не превышается, полоса не будет отображаться.

Попробуйте сделать так:

<div style="overflow-y: scroll; height: 400px;">

Этот код задает вертикальную прокрутку и фиксированную высоту для элемента div.

Для того чтобы задать элементу высоту, равную 100% высоты области просмотра, используйте следующие CSS-правила:

overflow: auto;
max-height: 100vh;

Это позволит элементу занимать всю высоту экрана, при этом если его содержимое превышает доступное пространство, появится прокрутка.

Чтобы решить эту проблему, вы можете использовать CSS-свойство overflow-y: auto; для вашего элемента div. Это позволит добавить вертикальную прокрутку, если содержимое превышает высоту контейнера.

Также рекомендуется установить ширину элемента, используя свойство width. Например:

.my-div {
    width: 300px; /* Установите нужную ширину */
    height: 200px; /* Установите нужную высоту */
    overflow-y: auto; /* Добавить вертикальную прокрутку */
}

Таким образом, ваш элемент div будет иметь заданные размеры и будет прокручиваться по вертикали, когда содержимое превышает высоту.

Вы можете использовать этот код вместо текущего:

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">

overflow-x: Свойство overflow-x определяет, что делать с левыми и правыми краями содержимого, если оно выходит за пределы области содержимого элемента.

overflow-y: Свойство overflow-y определяет, что делать с верхними и нижними краями содержимого, если оно выходит за пределы области содержимого элемента.

Значения:

• visible: Значение по умолчанию. Содержимое не обрезается и может отображаться за пределами области содержимого.

• hidden: Содержимое обрезается, и механизм прокрутки не предоставляется.

• scroll: Содержимое обрезается, и механизм прокрутки предоставляется.

• auto: Должен обеспечивать механизм прокрутки для переполняемых блоков.

• initial: Устанавливает это свойство в его значение по умолчанию.

• inherit: Наследует это свойство от родительского элемента.