Содержание

overflow — CSS | MDN

Свойство CSS overflow определяет, необходимо ли для переполненного блочного элемента содержимое обрезать, предоставить полосы прокрутки или просто отобразить.

Использование свойства overflow со значениями, отличными от visible, (значение, принятое по умолчанию), создаёт новый блочный контекст форматирования (en-US). Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float’ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута scrollTop для соответствующего HTML-элемента, даже если overflow имеет значение hidden, элемент, возможно, придётся прокрутить.

Формат синтаксиса (en-US):

overflow = 
[ (en-US) visible | (en-US) hidden | (en-US) clip | (en-US) scroll | (en-US) auto ] (en-US){1,2} (en-US)  
overflow: visible
overflow: hidden
overflow: scroll
overflow: auto
overflow: inherit

Значения

visible

По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.

hidden

Контент обрезается, без предоставления прокрутки.

scroll

Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могут печатать переполненное содержимое.

auto

Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.

Расширения Mozilla
-moz-scrollbars-none Этот API вышел из употребления и его работа больше не гарантируется.

Используйте overflow:hidden.

-moz-scrollbars-horizontal «> Deprecated

Использование overflow-x (en-US) и overflow-y (en-US) предпочтительнее.

-moz-scrollbars-vertical Deprecated

Использование overflow-x (en-US) и overflow-y (en-US) предпочтительнее.

-moz-hidden-unscrollable Non-standard

Главным образом предназначен для внутреннего использования и для тем. Отключает прокрутку XML root элементов и

<html>, <body> клавишами со стрелками и колесом мыши.

p {
     width: 12em;
     height: 6em;
     border: dotted;
     overflow: visible; /* содержимое не обрезается */
}

visible (default) Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: hidden; /* полосы прокрутки не предоставляются */ }

overflow: hidden Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: scroll; /* всегда показывать полосы прокрутки */ }

overflow: scroll Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: auto; /* добавить полосы прокрутки, если это необходимо */ }

overflow: auto Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

СпецификацияСтатусКомментарий
CSS Overflow Module Level 3
Определение ‘overflow’ в этой спецификации.
Рабочий черновик		Changed syntax to allow one or two keywords instead of only one
CSS Box Model
Определение ‘overflow’ в этой спецификации. 		Кандидат в рекомендацииБез изменений
CSS Level 2 (Revision 1)
Определение ‘overflow’ в этой спецификации.		РекомендацияInitial definition.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Firefox (Gecko) Примечания

Из-за Firefox 3.6 (Gecko 1.9.2), свойство overflow неверно применяется к элементам table-group (<thead> , <tbody> , <tfoot>). Это поведение будет исправлено в следующих версиях.

Internet Explorer Примечания

Internet Explorer 4 — 6 увеличивает элемент с overflow:visible

(значение по умолчанию), чтобы заполнить содержимое в нём.height/widthдействуют подобно min-height/min-width.

  • Связанные свойства CSS: text-overflow (en-US), white-space, overflow-x (en-US), overflow-y (en-US), overflow-inline (en-US), overflow-block, clip (en-US), display

Last modified:

000Z»>13 авг. 2022 г., by MDN contributors

Overflow CSS уроки для начинающих академия

❮ Назад Дальше ❯

Свойство CSS overflow управляет тем, что происходит с содержимым, которое слишком велико для размещения в области.

This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.


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

❮ Назад Дальше ❯

CSS свойство overflow

❮ Назад Вперед ❯

Свойство overflow управляет отображением контента, который выходит за границы блочного элемента.

Оно определяет, должен ли контент быть обрезан, чтобы поместиться в блоке, или должны ли быть добавлены полосы прокрутки к элементу. Это сокращенное свойство для:

  • overflow-x
  • overflow-y

Контент выходит за границы, если высота и ширина контейнера установлены.

Свойство overflow имеет следующие значения:

  • visible
  • hidden
  • scroll
  • auto
  • overlay

Значение «overlay» является устаревшим.

overflow: visible | hidden | scroll | auto | overlay | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      background-color: #ccc;
      width: 300px;
      height: 200px;
      overflow: visible;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства overflow</h3>
    <h4>overflow: visible</h4>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.  Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
  </body>
</html>

Попробуйте сами!

Пример со значением «scroll»:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      background-color: #ccc;
      width: 300px;
      height: 200px;
      overflow: scroll;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства overflow</h3>
    <h4>overflow: scroll</h4>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.  Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
  </body>
</html>

Попробуйте сами!

Пример со значением «hidden», где контент обрезается, чтобы поместиться в блоке:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      background-color: #ccc;
      width: 300px;
      height: 200px;
      overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства overflow</h3>
    <h4>overflow: hidden</h4>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.  Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
  </body>
</html>

Попробуйте сами!

Пример со всеми значениями свойства:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.scroll {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: scroll;
      }
      div. hidden {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: hidden;
      }
      div.auto {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: auto;
      }
      div.visible {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: visible;
      }
      div.overlay {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: overlay;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства overflow</h3>
    <h4>overflow: scroll</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.  Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
    <h4>overflow: hidden</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </div>
    <h4>overflow: auto</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
    <h4>overflow: visible</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.  Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
    <br/>
    <br/>
    <h4>overflow: overlay</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </div>
  </body>
</html>

Попробуйте сами!

Свойство overflow — обработка вылезающего содержимого

Свойство overflow указывает браузеру, как поступать с содержимым (текст, картинки, другие блоки), которое вылазит за границы блока (за его ширину или высоту). Браузер может скрыть вылезающую часть, добавить полосы прокрутки или ничего не делать (оставить как есть — вылезшим за границы).

Синтаксис

селектор { overflow: hidden | scroll | auto | visible; }

Значения

ЗначениеОписание
hiddenСкрывает то содержимое, которое вылезло за границы блока.
scroll Добавляет полосы прокрутки, причем всегда, даже если ничего не вылазит (в этом случае они будут неактивными).
auto Добавляет полосы прокрутки при необходимости: если содержимое не помещается — они появятся, если все помещается — их не будет.
visibleНе скрывает то содержимое, которое вылезло за границы блока.

Значение по умолчанию: visible.

Пример . Значение visible

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы. Обрезания не происходит:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>#elem { overflow: visible; border: 1px solid red; width: 200px; }

:

Пример . Значение visible

А сейчас ограничена не только ширина, но и высота (текст вылезет за блок и по высоте):

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>#elem { width: 200px; height: 40px; overflow: visible; border: 1px solid red; margin-bottom: 20px; }

:

Пример . Значение hidden

Сейчас все, что вылезло за границы контейнера просто обрежется (и по высоте тоже). Обратите внимание на то, что обрезание по высоте происходит только тогда, когда она задана явно (в нашем случае height: 40px). В противном случае текст расширяет контейнер по высоте — и никакого обрезания не будет:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>#elem { overflow: hidden; width: 200px; height: 40px; border: 1px solid red; }

:

Пример . Значение scroll

При значении scroll полосы прокрутки будут всегда, даже если ничего не вылазит (в этом случае они будут неактивными). Сейчас текст не вылазит ни по ширине, ни по высоте, но полосы прокрутки все равно есть (неактивные):

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>#elem { overflow: scroll; width: 400px; height: 100px; border: 1px solid red; }

:

Пример . Значение auto

При значении auto полосы прокрутки добавляются только, если содержимое вылазит за контейнер. Сейчас их нет, так как все помещается:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>#elem { overflow: auto; width: 400px; height: 100px; border: 1px solid red; }

:

Пример .

Значение auto

А теперь ограничим ширину — появится горизонтальная полоса прокрутки:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>#elem { width: 200px; overflow: auto; height: 100px; border: 1px solid red; }

:

Смотрите также

  • свойство word-break,
    переносящее буквы длинного слова на новую строку
  • свойство overflow-wrap,
    переносящее буквы длинного слова на новую строку
  • свойство overflow-x,
    которое обрезает вылезающие по горизонтали части
  • свойство overflow-y,
    которое обрезает вылезающие по вертикали части

overflow | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Песочница
    • Пример
    • Примечание
    • Спецификация
    • Браузеры

Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

Значение по умолчаниюvisible
НаследуетсяНет
ПрименяетсяК блочным элементам
АнимируетсяНет

Синтаксис 

overflow: auto | hidden | scroll | visible

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

visible
Отображается всё содержимое элемента, даже за пределами установленной высоты и ширины.
hidden
Отображается только область внутри элемента, остальное будет скрыто.
scroll
Всегда добавляются полосы прокрутки.
auto
Полосы прокрутки добавляются только при необходимости.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

auto hidden scroll visible

div {
  height: 50px;
  overflow: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>overflow</title> <style> .layer { overflow: scroll; /* Добавляем полосы прокрутки */ width: 300px; /* Ширина блока */ height: 150px; /* Высота блока */ padding: 5px; /* Поля вокруг текста */ border: solid 1px black; /* Параметры рамки */ } </style> </head> <body> <div> <h3>Гетерогенный голубой гель</h3> <p>Кондуктометрия мягко передает электронный способ получения независимо от последствий проникновения метилкарбиола внутрь.</p> </div> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow

Объектная модель

Объект. style.overflow

Примечание

Internet Explorer до версии 7.0 включительно:

  • относительно позиционированные дочерние элементы, значения overflow у которых заданы как auto или scroll ведут себя словно у них задано position: fixed.

Internet Explorer 8:

  • Сочетание overflow со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
  • Для блока, у которого указаны свойства float и overflow со значением scroll, игнорируется ширина, заданная через свойство max-width.
  • Высота блока с горизонтальной полосой прокрутки увеличивается на высоту скролбара, хотя по спецификации CSS заданные размеры должны включать в себя и полосы прокрутки.

Firefox 3.6 некорректно применяет overflow к группам ячеек таблицы (<thead>, <tbody>, <tfoot>).

Спецификация

СпецификацияСтатус
CSS Overflow Module Level 3Рабочий проект
CSS Level 2 Revision 1 (CSS 2. 1)Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

4121711
1171

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Форматирование

См. также

  • overflow-x
  • overflow-y
  • Высота и ширина в CSS
  • Липкое позиционирование
  • Несколько псевдоэлементов
  • Очистка float
  • Подробнее о позиционировании

Рецепты

  • Как увеличить картинку при наведении?

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02. 03.2020

Редакторы: Влад Мержевич

overflow-y | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Песочница
    • Пример
    • Спецификация
    • Браузеры

Свойство overflow-y управляет отображением содержания блочного элемента по вертикали, если контент целиком не помещается и выходит за область сверху или снизу от блока.

Значение по умолчаниюvisible
НаследуетсяНет
ПрименяетсяК блочным элементам
АнимируетсяНет

Синтаксис 

overflow-y: auto | hidden | scroll | visible

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

visible
Отображается всё содержимое элемента, даже за пределами установленной высоты.
hidden
Отображается только область внутри элемента, остальное будет скрыто.
scroll
Всегда добавляется вертикальная полоса прокрутки.
auto
Вертикальная полоса прокрутки добавляется только при необходимости.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

auto hidden scroll visible

div {
  height: 50px;
  overflow-y: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>overflow-y</title> <style> body { overflow-y: hidden; /* Убираем вертикальную полосу прокрутки */ } . layer { width: 300px; /* Ширина блока */ height: 150px; /* Высота блока */ padding: 5px; /* Поля вокруг текста */ } </style> </head> <body> <div> <h3>Гетерогенный голубой гель</h3> <p>Кондуктометрия мягко передает электронный способ получения независимо от последствий проникновения метилкарбиола внутрь. </p> </div> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow-y

Объектная модель

Объект.style.overflowY

Спецификация

СпецификацияСтатус
CSS Overflow Module Level 3Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

51219.533.5
11103

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Форматирование

См. также

  • overflow
  • overflow-x
  • Отслеживание прокрутки

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

overflow — CSS: каскадные таблицы стилей

Сокращенное свойство CSS overflow задает желаемое поведение для переполнения элемента — т. е. когда содержимое элемента слишком велико для его контекста форматирования блока — в обоих направлениях.

Это свойство является сокращением для следующих свойств CSS:

  • overflow-x
  • переполнение-у 
 /* Значения ключевых слов */
переполнение: видимое;
переполнение: скрыто;
перелив: зажим;
переполнение: прокрутка;
переполнение: авто;
переполнение: скрытое видимое;
/* Глобальные значения */
переполнение: наследовать;
переполнение: начальное;
переполнение: вернуться;
переполнение: обратный слой;
переполнение: не установлено;

Свойство overflow указывается как одно или два ключевых слова, выбранных из списка значений ниже. Если указаны два ключевых слова, первое применяется к overflow-x , а второе — к overflow-y . В противном случае оба параметра overflow-x и overflow-y имеют одинаковое значение.

Значения

видимые

Содержимое не обрезается и может отображаться за пределами поля заполнения.

скрытый

Содержимое обрезается, если необходимо, чтобы соответствовать отступу. Полосы прокрутки не предоставляются, и не разрешена поддержка прокрутки пользователем (например, путем перетаскивания или использования колеса прокрутки). Содержимое может прокручиваться программно (например, путем установки значения свойства, такого как scrollLeft или метод scrollTo() ), поэтому элемент по-прежнему является контейнером прокрутки.

зажим

Подобно hidden , содержимое обрезается до поля заполнения элемента. Разница между clip и hidden заключается в том, что ключевое слово clip также запрещает любую прокрутку, включая программную прокрутку. Поле не является контейнером прокрутки и не запускает новый контекст форматирования. Если вы хотите запустить новый контекст форматирования, вы можете использовать для этого display: flow-root .

свиток

Содержимое обрезается, если необходимо, чтобы соответствовать отступу. Браузеры всегда отображают полосы прокрутки независимо от того, обрезано ли какое-либо содержимое, что предотвращает появление или исчезновение полос прокрутки при изменении содержимого. Принтеры могут по-прежнему печатать переполненный контент.

авто

Зависит от пользовательского агента. Если содержимое помещается внутри поля заполнения, оно выглядит так же, как visible , но по-прежнему устанавливает новый контекст форматирования блока. Настольные браузеры предоставляют полосы прокрутки, если содержимое выходит за пределы.

накладка Устаревший

Ведет себя так же, как auto , но с полосами прокрутки, нарисованными поверх содержимого, а не занимающими место.

Расширения Mozilla
-moz-полосы прокрутки-нет Устаревший

Вместо этого использовать переполнение : скрытый .

-moz-полосы прокрутки-горизонтальные Устаревший

Используйте overflow-x : прокрутите и overflow-y : скрытый или overflow: вместо этого прокрутите скрытый .

-moz-полосы прокрутки-вертикальный Not for use in new websites.»> Устаревший

Использовать overflow-x : скрыто и overflow-y : прокрутить или переполнение: скрыть прокрутку вместо этого.

-moz-скрытый-непрокручиваемый Устаревший

Использовать переполнение : вместо этого обрезать .

Начиная с Firefox 63, -moz-scrollbars-none , -moz-scrollbars-horizontal и -moz-scrollbars-vertical находятся за настройкой предпочтения функции. В about:config установите layout.css.overflow.moz-scrollbars.enabled на true .

Параметры переполнения включают обрезку, отображение полос прокрутки или отображение содержимого, вытекающего из контейнера в окружающую область.

При указании значения, отличного от visible (по умолчанию) или clip , создается новый контекст форматирования блока. Это необходимо по техническим причинам — если плавающий элемент пересекался с прокручиваемым элементом, он принудительно перематывал содержимое после каждого шага прокрутки, что приводило к медленной прокрутке.

Чтобы переполнение имело эффект, блочный контейнер должен иметь заданную высоту ( height или max-height ) или пробел установить на nowrap .

Установка для одной оси значения visible (по умолчанию) при установке для другой оси другого значения приводит к тому, что visible ведет себя как auto .

Свойство JavaScript Element.scrollTop может использоваться для прокрутки элемента HTML, даже если overflow имеет значение hidden .

 переполнение = 
 [ видимый | скрытый | клип | прокрутить | авто ]{1,2}

Установка различных значений переполнения для текста

HTML 
 

  видимый
  <р>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    долоремке лаудантиум. 
  



<дел>
  скрытый
  <р>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    долоремке лаудантиум.
<дел> прокрутить <р> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium долоремке лаудантиум.