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