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