CSS Макет - Overflow. Переполнение

Курс по основам CSS. W3Schools на русском языке. Уроки для начинающих

CSS свойство overflow управляет тем, что происходит с содержимым, которое слишком велико, чтобы поместиться в области.

Этот текст очень длинный и высота контейнера составляет всего 100 пикселей. Таким образом, полоса прокрутки добавляется, чтобы помочь читателю прокручивать содержимое. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Попробуйте сами »

CSS Overflow

Свойство overflow указывает, следует ли обрезать содержимое или добавлять полосы прокрутки, если содержимое элемента слишком велико, чтобы поместиться в указанной области. Например, если текст не помещается в блочный элемент <div>.

Overflow - (перевод с анг.) - Переполнение.

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

Примечание: Свойство overflow работает только для блочных элементов с указанной высотой.

Примечание: В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если установлено "overflow: scroll").

overflow: visible

По умолчанию, переполнение visible означает, что оно не обрезается и отображается вне поля элемента:

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

Пример

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}
Попробуйте сами »

overflow: hidden

Со значением hidden, переполнение обрезается, а остальное содержимое скрыто:

Пример

div {
  overflow: hidden;
}
Попробуйте сами »

overflow: scroll

При установке значения scroll переполнение обрезается, и для прокрутки внутри поля добавляется полоса прокрутки. Обратите внимание, что это добавит полосу прокрутки как по горизонтали, так и по вертикали (даже если она вам не нужна):

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

Пример

div {
  overflow: scroll;
}
Попробуйте сами »

overflow: auto

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

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

Пример

div {
  overflow: auto;
}
Попробуйте сами »

overflow-x и overflow-y

Свойства overflow-x и overflow-y указывают, следует ли изменять переполнение содержимого только по горизонтали или только по вертикали (или оба):

overflow-x указывает, что делать с левым/правым краем содержимого.
overflow-y указывает, что делать с верхним/нижним краем содержимого.

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

Пример

div {
  overflow-x: hidden; /* Скрывает горизонтальный скроллбар */
  overflow-y: scroll; /* Добавляет вертикальный скроллбар */
}
Попробуйте сами »

Проверьте себя с помощью упражнений!

Упражнение 1 » Упражнение 2 » Упражнение 3 »

Все CSS Свойства переполнения

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