CSS Макет - Overflow
CSS свойство overflow управляет тем, что происходит с содержимым, которое слишком велико, чтобы поместиться в области.
Попробуйте сами »
CSS Overflow
Свойство overflow указывает, следует ли обрезать содержимое или добавлять полосы прокрутки, если содержимое элемента слишком велико, чтобы поместиться в указанной области. Например, если текст не помещается в блочный элемент <div>.
Overflow - (перевод с анг.) - Переполнение.
Свойство overflow имеет следующие значения:
visible- По умолчанию. Переполнение не обрезается. Контент отображается вне поля элементаhidden- Переполнение обрезается (скрывается), а остальная часть содержимого будет невидимойscroll- Переполнение обрезается, и добавляется полоса прокрутки, чтобы увидеть остальную часть содержимогоauto- Аналогиченscroll, но добавляет полосы прокрутки только при необходимости
Примечание: Свойство overflow работает только для блочных элементов с указанной высотой.
Примечание: В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если установлено "overflow: scroll").
overflow: visible
По умолчанию, переполнение visible означает, что оно не обрезается и отображается вне поля элемента:
Пример
div {
width: 200px;
height:
50px;
background-color: #eee;
overflow: visible;
}
Попробуйте сами »
overflow: hidden
Со значением hidden, переполнение обрезается, а остальное содержимое скрыто:
overflow: scroll
При установке значения scroll переполнение обрезается, и для прокрутки внутри поля добавляется полоса прокрутки. Обратите внимание, что это добавит полосу прокрутки как по горизонтали, так и по вертикали (даже если она вам не нужна):
overflow: auto
Значение auto аналогично scroll, но добавляет полосы прокрутки только при необходимости:
overflow-x и overflow-y
Свойства overflow-x и overflow-y указывают, следует ли изменять переполнение содержимого только по горизонтали или только по вертикали (или оба):
overflow-x указывает, что делать с левым/правым краем содержимого.
overflow-y указывает, что делать с верхним/нижним краем содержимого.
Пример
div {
overflow-x: hidden; /* Скрыть горизонтальную полосу прокрутки
*/
overflow-y: scroll; /* Добавить вертикальную полосу прокрутки */
}
Попробуйте сами »
Проверьте себя с помощью упражнений!
Все CSS свойства Overflow
| Свойство | Описание |
|---|---|
| overflow | Определяет, что происходит, если содержимое переполняет поле элемента |
| overflow-x | Определяет, что делать с левым/правым краями содержимого, если оно выходит за пределы области содержимого элемента |
| overflow-y | Определяет, что делать с верхним/нижним краями содержимого, если оно выходит за пределы области содержимого элемента |
