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 | Указывает, что делать с верхними/нижними краями содержимого, если оно переполнено областью содержимого элемента |