У цій статті ми детально розберемо властивість overflow з усіма його значеннями, що дозволяє так само додати або прибрати горизонтальну / вертикальну смугу прокрутки. Іншими словами як зробити смуги прокрутки.
Overflow в CSS відповідає за те, як буде виглядати відображення інформації в блоці, в разі перевищення вмісту висоти або ширини цього блоку. Це властивість можна застосувати тільки до блокових елементів (display: block; або ті які спочатку є блоковими - div і так далі).
Можливі значення, які приймає це властивість (за замовчуванням visible):
- Visible - Відображається весь зміст елемента, навіть за межами встановленої висоти і ширини.
- Hidden - Відображається лише область всередині елемента, інше буде приховано.
- Scroll - Завжди додаються смуги прокрутки.
- Auto - Смуги прокрутки додаються тільки при необхідності.
- Inherit - Успадковує значення батька.
Найчастіше це властивість використовують, щоб прибрати або додати смуги прокрутки якомусь елементу. Таким чином, наприклад, надходять з фреймами, щоб не впихати їх в повний розмір. Або для вставки якогось великого тексту, щоб він не займав пів сторінки, а уютненько сидів в спеціальному блоці, і там його можна було прокрутити і прочитати. Здебільшого властивість вирішує проблеми комфортного відображення інформації.
У демо ви зможете поспостерігати, як діє кожне зі значень властивості на ділі:
body {margin: 0 0 0 0; padding: 0 0 60px 0; font-size: 16px;} h2 {color: # CC0033;} div {width: 200px; / * Фіксована ширина * / height: 300px; / * Фіксована висота * / border: 1px solid # 555; padding: 4px; margin: 4px; float: left; } .VisibleDiv {overflow: visible;} .HiddenDiv {overflow: hidden;} .ScrollDiv {overflow: scroll;} .AutoDiv {overflow: auto;}
Варто звернути увагу на те, що в даному конкретному випадку блоки з заданої фіксованою висотою і шириною. Це важливо, наприклад, розглянемо варіант, коли висота блоку задана в auto:
Ми мабуть, що текст у всіх випадках коректно відображається всередині блоку, крім невеликого незручності у випадку зі scroll, де з'являються неактивні смуги прокрутки.
Але в цьому випадку полягає невелика небезпека, зустрівшись з якої багато хто не розуміє, чому вона виникла і як її виправити. Справа в тому, що якщо блок з overflow: visible; тобто значенням за замовчуванням, а його вміст має елементи з будь-яким значенням float, крім none, то відображатися все це буде некоректно. Для того, щоб зрозуміти, що це за ситуація, розглянемо приклад:
<! DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Сторінка </ title> <link rel = "stylesheet" href = "/../ 2 / css / template.css "type =" text / css "/> </ head> <body> <h1> Під блоком VisibleDiv йде інший блок </ h1> <div class =" VisibleDiv "> <h2> visible < / h2> <p> Товариші! початок повсякденної роботи по формуванню позиції грає важливу роль у формуванні систем масової участі. Значимість цих проблем настільки очевидна, що постійний кількісний ріст і сфера нашої активності вимагають визначення та уточнення нових пропозицій. Таким чином зміцнення і розвиток структури являє собою цікавий експеримент перевірки моделі розвитку. Завдання організації, особливо ж нова модель організаційної діяльності в значній мірі обумовлює створення системи навчання кадрів, відповідає нагальним потребам. </ P> </ div> <div class = "ignor"> Йде відразу після діва з overflow: visible (значенням за -умолчанію) </ div> <h1> Під блоком VisibleDiv ничего нету </ h1> <div class = "VisibleDiv"> <h2> visible </ h2> <p> Товариші! початок повсякденної роботи по формуванню позиції грає важливу роль у формуванні систем масової участі. Значимість цих проблем настільки очевидна, що постійний кількісний ріст і сфера нашої активності вимагають визначення та уточнення нових пропозицій. Таким чином зміцнення і розвиток структури являє собою цікавий експеримент перевірки моделі розвитку. Завдання організації, особливо ж нова модель організаційної діяльності в значній мірі обумовлює створення системи навчання кадрів, відповідає нагальним потребам. </ P> </ div> </ body> </ html> body {margin: 0 0 0 0; padding: 0 0 60px 0; font-size: 16px;} h2 {color: # CC0033;} p {float: left;} div {width: 500px; height: auto; border: 1px solid # 555; padding: 4px; margin: 4px; } .VisibleDiv {overflow: visible; background: rgba (0,255,0,0.1);} .ignor {background: rgba (0,255,0,0.6); color: #FFFFFF; font-weight: bold;}
У першому випадку, видно, що вміст з властивістю float виїжджає за межі блоку і не враховуються їм при визначенні висоти блоку, у другому випадку під блоком з overflow: visible; спеціально розміщений інший блок і закращен в інший колір. Це не єдині приклади того, як може поводитися на сторінці такі блоки (з overflow: visible; і height: auto;). Виправляється це заміною значення visible на hidden, слід пам'ятати, що це властивість варто вказувати тільки блокам з height: auto; , Якщо буде фіксована висота, то великий шанс, що вміст просто сховається, якщо воно більше заданої висоти.
Ось як буде виглядати виправлений варіант:
Так само у вас не виникне такої проблеми, якщо блоку з overflow: visible; і height: auto; задано ще і якесь значення властивості float. Взагалі в багатьох випадках відображення елементів залежить від набору властивостей, а не від окремих властивостей.