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