Свойство CSS height
Свойство CSS height задаёт высоту элемента. Попробуйте примеры с каждым из значений этого свойства.
Свойство CSS height задаёт высоту блока содержимого элемента — области, в которой находится текст и дочерние элементы. По умолчанию (height: auto) браузер задаёт блочному элементу такую высоту, которая достаточна для размещения его содержимого, поэтому height указывают только тогда, когда нужна фиксированная или относительная высота.
По умолчанию заданное значение применяется только к блоку содержимого — оно не включает padding, border и margin. Таким образом, <div> с height: 100px; padding: 20px будет занимать на экране 140px по высоте. Чтобы height учитывало padding и border, установите box-sizing: border-box — это общепринятая лучшая практика. Связанное свойство — width, которое работает аналогично по горизонтальной оси.
Высоту можно задавать как длину (px, em, rem, vh, cm, …) или как процент. Значение по умолчанию — auto.
Если также заданы свойства min-height и max-height, они ограничивают height: элемент никогда не будет ниже min-height и не превысит max-height.
Когда height задан числовым значением и содержимое превышает эту высоту, оно переполняет блок. Свойство overflow управляет тем, что происходит в этом случае: обрезает содержимое, скрывает его или добавляет полосу прокрутки.
Отрицательные значения не допускаются.
Особенность процентных значений. Процентная height вычисляется относительно высоты родительского элемента — и только в том случае, если у этого родителя задана явная высота. Если высота родителя равна auto (значение по умолчанию), height: 50% дочернего элемента не имеет фиксированной точки отсчёта и трактуется как auto, то есть не даёт видимого эффекта. Чтобы процентные высоты работали вплоть до уровня страницы, задайте предкам явную высоту — обычно html, body { height: 100%; } — или используйте единицу viewport vh (height: 50vh всегда равна половине viewport, независимо от родителя).
| Initial Value | auto |
|---|---|
| Applies to | all elements |
| Inherited | No. |
| Animatable | Yes. Height is animatable. |
| Version | CSS1 |
| DOM Syntax | 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://api.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://api.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>Ключевые слова для внутренних размеров
Помимо фиксированных длин и процентов, современный CSS предлагает ключевые слова, которые задают размер элемента по его содержимому, а не по числовому значению:
.box {
height: max-content; /* tall enough for the content, never wrapping it shorter */
}
.box {
height: min-content; /* the smallest height the content can take */
}
.box {
height: fit-content; /* like auto, but clamps to fit-content(<length>) when given */
}Они наиболее полезны в макетах Flexbox и CSS Grid, где нужно, чтобы трек или элемент «обнимал» своё содержимое, а не растягивался. Эти ключевые слова широко поддерживаются в современных браузерах.
Значения
| Значение | Описание | Попробовать |
|---|---|---|
| auto | При использовании этого значения браузер вычисляет исходную высоту изображения или блока. Это значение по умолчанию данного свойства. | Попробовать » |
| length | Задаёт высоту в px, cm, em, rem, vh и других единицах. | Попробовать » |
| % | Задаёт высоту в процентах. | |
| initial | Устанавливает свойство в значение по умолчанию. | Попробовать » |
| inherit | Наследует свойство от родительского элемента. |