CSS-свойство overflow-y указывает поведение блока, когда содержимое переполняет область контейнера по оси Y. Возможны три варианта: обрезать содержимое, отобразить полосу прокрутки (scroll) или отображать содержимое за пределами блока,

Значение по умолчанию: visible
Применяется к: Блочные элементы, строчные и flex-элементы
Наследование: Нет
Анимирование: Нет. Анимируемые свойства
Версия: CSS 2, 3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

overflow-y: visible | hidden | scroll | auto | initial | inherit

Примеры написания кода свойства overflow-y:

div {
    width: 400px;
    height: 300px;
    overflow-y: scroll;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
visible Контент не обрезается; он будет отображаться вне контейнера, и, таким образом, может перекрывать другое содержимое. Это значение установлено по умолчанию.
hidden Контент, переполняющий контейнер, обрезается; обрезаная часть содержимого будет невидимой.
scroll Контент, переполняющий контейнер, обрезается и при hidden, но предоставляет механизм прокрутки (scroll) для доступа к обрезаному контенту. Полоса прокрутки добавялется всегда, даже если контента недосточно для обрезания.
auto Работает так же как и scroll, за тем исключением, что полоса прокрутки (scroll) добавляется при необходимости.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента overflow-y.

Поддержка браузеров

Свойство overflow-y поддерживается во всех основных браузерах.

Internet Explorer 7 и более ранние версии не поддерживают свойство overflow-y. IE8 поддерживает это свойство, но требует специального префикса -ms- (например, -ms-overflow-y). Поддерживается в IE9 и выше.

Читайте также

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.