height
- коротка інформація
- Синтаксис ?
- позначення
- значення
- Пісочниця
- приклад
- об'єктна модель
- Примітка
- Специфікація ?
- браузери
- Автор і редактори
Встановлює висоту вмісту елемента. За замовчуванням висота визначається автоматично, виходячи з вмісту елемента, але якщо поставити фіксоване значення висоти, то вона буде встановлена, не дивлячись на обсяг вмісту. Якщо вміст елемента перевищує вказане значення висоти, то висота елемента залишиться незмінною, а вміст буде відображатися поверх нього. Через цю особливість може вийти накладення вмісту елементів один на одного, коли елементи в коді HTML йдуть послідовно. Щоб цього не сталося, додайте властивість overflow зі значенням auto до стилю елемента.
Якщо для елемента властивість box-sizing задано як border-box, то height визначає висоту блоку.
коротка інформація
Значення за замовчуванням auto Успадковується Немає Застосовується До всіх елементів, за винятком малих, колонок таблиці анімуйте Так
Синтаксис ?
height: <розмір> | <Відсотки> | auto
позначення
Опис Приклад <тип> Вказує тип значення. <Розмір> A && B Значення повинні виводитися в зазначеному порядку. <Розмір> && <колір> A | B Вказує, що треба вибрати тільки одне значення із запропонованих (A або B). normal | small-caps A || B Кожне значення може використовуватися самостійно або спільно з іншими в довільному порядку. width || count [] групуються значення. [Crop || cross] * Повторювати нуль або більше разів. [, <Час>] * + Повторювати один або більше разів. <Число> +? Зазначений тип, слово або група не є обов'язковим. inset? {A, B} Повторювати не менше A, але не більше B раз. <Радіус> {1,4} # Повторювати один або більше разів через кому. <Час> # ×
значення
Як значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. При використанні процентної запису висота обчислюється в залежності від значення height у батьківського елементу. Якщо батько явно не вказано, то в його якості виступає вікно браузера. Якщо висота у батька явно не визначена, то застосовується значення auto, воно встановлює висоту виходячи з вмісту елемента.
Пісочниця
Вінні-Пух був завжди не проти трохи підкріпитися, особливо годині об одинадцятій ранку, тому що в цей час сніданок вже давно закінчився, а обід ще й не думав починатися. І, звичайно, він дуже зрадів, побачивши, що Кролик дістає чашки і тарілки.
приклад
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> height </ title> <style> .layer {height: 50px; / * Висота блоку * / overflow: scroll; / * Додаємо смуги прокрутки * / background: # fc0; / * Колір фону * / padding: 7px; / * Поля навколо тексту * / border: 1px solid # 333; / * Параметри рамки * /} </ style> </ head> <body> <div class = "layer"> Чорнозем, в поєднанні з традиційними агротехнічними прийомами, локально знижує фраджіпен. Суглинок перманентно розчиняє биокосное червоноземів в повній відповідності з законом Дарсі. </ Div> </ body> </ html>
Результат даного прикладу показаний на рис. 1.
Мал. 1. Застосування властивості height
об'єктна модель
об'єкт .style.height
Примітка
Браузер Internet Explorer до версії 7 некоректно визначає height як min-height .
Браузер Internet Explorer 8 невірно відображає елемент при додаванні overflow зі значеннями auto і scroll.
У режимі сумісності (quirk mode) Internet Explorer до версії 7 включно неправильно обчислює висоту елемента, не додаючи до неї значення padding і border.
Специфікація ?
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) - специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) - група, що відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників по реалізації стандарту.
- Proposed Recommendation (Пропонована рекомендація) - на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження.
- Working Draft (Робочий проект) - більш зріла версія чернетки після обговорення і внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторський чернетка) - чорнова версія стандарту після внесення правок редакторами проекту.
- Draft (Чернетка специфікації) - перша чорнова версія стандарту.
×
браузери
У таблиці браузерів застосовуються такі позначення.
- - властивість повністю підтримується браузером з усіма допустимими значеннями;
- - властивість браузером не сприймається і ігнорується;
- - при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації.
Число вказує версію браузера, починаючи з якої властивість підтримується.
×
Автор і редактори
Автор: Влад Мержевіч
Остання зміна: 30.08.2017
Редактори: Влад Мержевіч
Lt;Число> +?Inset?
Специфікація ?
