Что такое height в css
height
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.1+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Нет |
| Применяется | К блочным и заменяемым элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#propdef-height |
Версии CSS
Описание
Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег ). Высота не включает толщину границ вокруг элемента, значение отступов и полей.
Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow : auto к стилю элемента.
Синтаксис
height: значение | проценты | auto | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. auto устанавливает высоту исходя из содержимого элемента
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства height
Объектная модель
[window.]document.getElementById(» elementID «).style.height
Браузеры
В режиме совместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет высоту элемента, не добавляя к ней значение отступов, полей и границ.
height
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.1+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Нет |
| Применяется | К блочным и заменяемым элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#propdef-height |
Версии CSS
Описание
Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег ). Высота не включает толщину границ вокруг элемента, значение отступов и полей.
Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow : auto к стилю элемента.
Синтаксис
height: значение | проценты | auto | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. auto устанавливает высоту исходя из содержимого элемента
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства height
Объектная модель
[window.]document.getElementById(» elementID «).style.height
Браузеры
В режиме совместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет высоту элемента, не добавляя к ней значение отступов, полей и границ.
CSS height Свойство
Пример
Задайте высоту двух элементов
div.a <
height: auto;
border: 1px solid black;
>
div.b <
height: 50px;
border: 1px solid black;
>
Подробнее примеры ниже.
Определение и использование
Свойство height задает высоту элемента.
Высота элемента не включает отступы, границы или поля!
Если height: auto; элемент будет автоматически регулировать его высоту, чтобы его содержимое будет отображаться правильно.
Если для height задано числовое значение (например, пикселы, (r) EM, проценты), то если содержимое не умещается в пределах указанной высоты, оно будет переполнено. То, как контейнер будет обрабатывать переполненное содержимое, определяется свойством перелива.
Примечание: Свойства Минимальная высота и Максимальная высота переопределяют height свойство.
| Значение по умолчанию: | auto |
|---|---|
| Inherited: | no |
| Animatable: | yes. Читайте о animatable |
| Version: | CSS1 |
| Синтаксис JavaScript: | object.style.height=»500px» |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Синтаксис CSS
Значения свойств
| Значение | Описание |
|---|---|
| auto | Обозреватель вычисляет высоту. Это значение по умолчанию |
| length | Определяет высоту в пикселах, см и т. д. читать о единицах длины |
| % | Определяет высоту в процентах от содержащего блока |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Установите высоту элемента на 50% от высоты родительского элемента:
СSS Свойство height
Пример
Установить высоту двух элементов
div.a <
height: auto;
border: 1px solid black;
>
div.b <
height: 50px;
border: 1px solid black;
>
Определение и использование
Свойство height задает высоту элемента.
Свойство высота элемента не включает отступы, границы или поля!
Если элемент height: auto; автоматически отрегулирует свою высоту, чтобы его содержимое отображалось правильно.
Если height устанавливается в числовое значение (например, пиксели, (r)em, проценты), то если содержимое не помещается в пределах указанной высоты, он будет переполнен. Как контейнер будет обрабатывать переполненное содержимое определяется overflow.
| Значение по умолчанию: | auto |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | да. Прочитать о animatable Попробовать |
| Версия: | CSS1 |
| JavaScript синтаксис: | object.style.height=»500px» Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
CSS Синтаксис
Значения свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| auto | Браузер вычисляет высоту. Это значение по умолчанию | Воспроизвести » |
| length | Определяет высоту в px, cm, т. д. Прочитать о Единицы длины | Воспроизвести » |
| % | Определяет высоту в процентах от содержащего блока | |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Примеры
Пример
Установить высоту элемента на 50% от высоты родительского элемента:
CSS Высота и ширина
CSS Настройка высоты и ширины
Свойства height и width используются для установки высоты и ширины элемента.
Свойства высоты и ширины не включают padding (отступы), border (границы) или margin (поля). Они устанавливают высоту/ширину области внутри отступа, границы и поля элемента.
CSS Значения height/width
Свойства height и width могут иметь следующие значения:
CSS height/width Примеры
Пример
Установите высоту и ширину элемента
Пример
Установите высоту и ширину другого элемента
Примечание: Помните, что свойства height и width не включают отступы (padding), границы (border) или поля (margin)! Они устанавливают высоту/ширину области внутри отступа, границы и поля элемента!
Свойство max-width используется для установки максимальной ширины элемента.
Использование max-width вместо этого в данной ситуации улучшит работу браузера с небольшими окнами.
Совет: Измените окно браузера на ширину меньше 500 пикселей, чтобы увидеть разницу между двумя div-ами!
Пример
Установите высоту и ширину элементов
Этот пример демонстрирует, как установить высоту и ширину различных элементов.
Установите высоту и ширину изображения, используя проценты
Этот пример демонстрирует, как установить высоту и ширину изображения, используя процентное значение.
Установите минимальную ширину и максимальную ширину элемента
Этот пример демонстрирует, как установить минимальную ширину и максимальную ширину элемента, используя значение в пикселях.
Установите минимальную высоту и максимальную высоту элемента
Этот пример демонстрирует, как установить минимальную высоту и максимальную высоту элемента, используя значение в пикселях.