Свойство CSS height
Свойство height используется для установки высоты элемента. Это свойство не включает padding, borders или margins. Значение свойства height может быть задано в "px", "cm", "vh" или в процентах. Значение по умолчанию — "auto".
Если используются свойства min-height и max-height, они ограничивают значение свойства height.
Если для height установлено одно из числовых значений, таких как rem, px или %, и содержимое не помещается в указанную высоту, это приведет к переполнению. Свойство CSS overflow определяет, как контейнер будет обрабатывать переполнение.
INFO
Отрицательные значения не допускаются.
| Начальное значение | auto |
|---|---|
| Применяется к | всем элементам |
| Наследуется | Нет. |
| Анимация | Да. Высота анимируется. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.height = "400px"; |
Синтаксис
Синтаксис свойства CSS height
height: auto | length | initial | inherit;Пример свойства height:
Пример свойства CSS height со значением length
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
height: 60px;
background-color: #1c87c9;
color: #eee;
}
p {
height: 30px;
background-color: #8ebf42;
color: #eee;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<div>The height of this div element is set to "60px".</div>
<p>The height of this paragraph is set to "30px".</p>
</body>
</html>Результат
Пример свойства height с тегом HTML <image>:
Пример свойства CSS height со значениями auto и length
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-color: #ccc;
}
.height-normal {
height: auto;
}
.height-big {
height: 100px;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<p>Here the height is set to "auto"</p>
<img class="height-normal" src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<br />
<hr />
<p>The height for this image is defined as "100px".</p>
<img class="height-big" src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
</body>
</html>Пример свойства height со значением "length":
Пример свойства CSS height при использовании значения vh
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.container {
height: 50vh;
border: 2px solid #1c87c9;
padding: 5px;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<div class="container">
<p>Here the height is specified as "50vh".</p>
</div>
</body>
</html>Пример свойства height со всеми значениями:
Пример свойства CSS height со значениями auto, vh, % и px
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.red-container {
height: 30vh;
border: 2px solid #f45e30;
color: #f45e30;
}
.blue-container {
height: 40%;
width: 30%;
border: 2px solid #1c87c9;
color: #1c87c9;
margin-top: 20px;
}
.orange-container {
height: 100px;
border: 2px solid #f9fc35;
color: #f9fc35;
margin-top: 20px;
}
.green-container {
height: auto;
border: 2px solid #8ebf42;
color: #8ebf42;
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<div class="red-container">
Height 30vh
<div class="blue-container">
Height 40%
</div>
</div>
<div class="orange-container">
Height 100px;
</div>
<div class="green-container">
Height (auto)
</div>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| auto | При использовании этого значения браузер вычисляет исходную высоту изображения или блока. Это значение по умолчанию для данного свойства. | Запустить » |
| length | Задаёт высоту в px, cm, em, rem, vh и т. д. | Запустить » |
| % | Задаёт высоту в процентах. | |
| initial | Заставляет свойство использовать значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какие возможные значения можно задать для свойства height в CSS?