Передова інформація про властивість CSS overflow
Опис
Властивість overflow контролює відображення вмісту блокового елемента, якщо він не вміщується повністю і виходить за межі заданих розмірів.
Синтаксис
overflow: auto | hidden | scroll | visible | inherit
Значення
- visible
- Відображається весь вміст елемента, навіть за межами встановленої висоти і ширини.
- hidden
- Відображається лише область всередині елемента, решта буде прихована.
- scroll
- Завжди додаються смуги прокрутки.
- auto
- Смуги прокрутки додаються лише за необхідності.
- inherit
- Наслідує значення батька.
Приклад
<!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>Duis te feugifacilisi</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>Об'єктна модель
[window.]document.getElementById("elementID").style.overflow
Браузери
Internet Explorer до версії 7.0 включно:
- не підтримує значення inherit;
- відносно позиціоновані дочірні елементи, значення 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>).