HTML теги
CSS властивості
ГлавнаяВластивості CSSАтрибут overflow в CSS

Атрибут overflow в CSS

1167

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

Коротка інформація

Значення за замовчуванням visible
Наслідує Ні
Застосування ється До блокових елементів
Анімується Ні

Синтаксис 

<code>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
Смуги прокручування додаються лише за необхідності.

Пісочниця

tablet is-6-desktop playground-values"> 
div { height: 50px; overflow: <span class="playground-active">{{ playgroundValue }} 
</span>; }

Приклад

<!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 class="layer"> <h2>Гетрогенний блакитний гель</h2> <p>Кондуктометрія м'яко передає електронний спосіб отримання незалежно від наслідків проникнення метилкарбіолу всередину.</p>
</div>
</body>
</html>

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

Застосування якості overflow Рис. 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 (Можлива рекомендація дація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
  • Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
  • Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери

4 12 1 7 1 1
1 1 7 1

Браузери

У таблиці браузерів застосовуються такі позначення.

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

Число вказує версію браузера, починаючи з якої властивість підтримується.

"field field-name-field-css-cat field-type-taxonomy-term-reference field-label-hidden">
Форматування
© Htmlbook - довідник HTML і CSS, 2025. Працює на MaxSite CMS