Min-height и max-height в CSS — это ненаследуемые свойства, которые используются для указания минимальной и максимальной высоты блока элемента.
Другими словами, эти свойства используются для управления нижним и верхним пределами размера блока элемента. Значение этих свойств может быть auto, none, length, percentage, initial и inherit. Однако отрицательные значения не допускаются.
Такие веб-браузеры, как IE7 и Firefox 2, были первыми крупными браузерами, поддерживающими свойства min-height и max-height.
Синтаксис для определения свойств min-height и max-height в CSS
Общий синтаксис определения свойств min-height и max-height в CSS для управления минимальной и максимальной высотой элемента выглядит следующим образом:
selector {
min-height: value;
max-height: value;
}Здесь селектор представляет элемент, к которому должно применяться правило CSS.
Возможные значения для свойств min-height и max-height
Возможные значения свойств CSS min-height и max-height следующие:
- auto: Это значение по умолчанию для min-height. Веб-браузер вычисляет минимальную высоту для элемента.
- none: Это значение по умолчанию для max-height, то есть максимальная высота отсутствует.
- длина: определяет фиксированную минимальную и максимальную высоту в таких единицах, как пиксели (px), em (em), rem (rem) и т. д.
- процент: определяет минимальную и максимальную высоту в процентах от высоты содержащего блока.
- initial: Установка этого значения устанавливает для свойства значение по умолчанию, которое равно auto.
- inherit: Установка этого значения наследует минимальную и максимальную высоту от родительского элемента.
Пример:
div {
min-height:200px;
max-height: 100px;
}Пример на основе свойств min-height и max-height
Давайте рассмотрим пример, в котором мы установим минимальную высоту элемента.
Пример 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Min-Height Example</title>
<style>
div {
width: 100%;
min-height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>This div element will always have a minimum height of 200px.
</div>
</body>
</html>
Выход:
В этом примере элемент div всегда будет иметь минимальную высоту 200 пикселей, даже если содержимое внутри него меньше.
Давайте рассмотрим пример, в котором мы установим максимальную высоту для элемента div.
Пример 3:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Max-Height Example</title>
<style>
div {
width: 100%;
max-height: 150px;
background-color: lightcoral;
overflow: auto;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec odio ipsum.
Suspendisse cursus malesuada facilisis. Nunc consectetur euismod sem quis congue.
Integer lacinia velit sed massa pellentesque, nec venenatis eros venenatis.
Maecenas nec dui lacus. Fusce fringilla velit urna, ac tempus ligula malesuada at.
Donec et mi dui. Nam ac lectus in risus consequat commodo.
Donec suscipit neque nulla, non vulputate odio venenatis ac. Cras in magna eget felis convallis aliquam.
In hac habitasse platea dictumst. Proin in feugiat urna, a condimentum sapien.
Vivamus ultrices, eros sit amet pellentesque aliquet, nulla libero fermentum dui, at pretium sapien urna ut turpis.
Nullam vitae neque neque. Proin pharetra vel dolor eu vehicula.
</div>
</body>
</html>
Вывод:
В этом примере элемент div имеет максимальную высоту 150px. Если текстовое содержимое превышает эту высоту, оно становится прокручиваемым из-за определенного свойства overflow: auto.
Используя начальное значение
Когда вы указываете начальное значение для свойств min-height и max-height, оно устанавливает свойства min-height и max-height в значение по умолчанию, которое равно auto. Это означает, что блок элемента не будет иметь ограничений по минимальной и максимальной высоте.
Пример 4:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min-Height with Initial Value Example</title>
<style>
.box1 {
min-height: 200px; /* Initially setting a minimum height */ background-color: lightblue;
}
.box2 {
min-height: initial; /* Resetting to default value */ background-color: lightgreen;
}
</style>
</head>
<body>
<div class="box1">
<p>This box has a minimum height of 300px.</p>
</div>
<div class="box2">
<p>This box has its minimum height set to the default value, which is auto.</p>
</div>
</body>
</html>
В этом примере элемент .box1 изначально имеет минимальную высоту 300 пикселей, но для элемента .box2 min-height задан на значении по умолчанию с помощью initial.
Пример 5:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Max-Height with Initial Value Example</title>
<style>
.box1 {
max-height: 300px; /* Initially setting a maximum height */ background-color: lightcoral;
overflow: auto;
}
.box2 {
max-height: initial; /* Setting to default value none. */ background-color: lightyellow;
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
<p>This box has a maximum height of 300px.</p>
<p>If the content exceeds this height, it will be scrollable.</p>
</div>
<div class="reset">
<p>This box has its maximum height reset to the default value (none).</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum nec odio ipsum. Suspendisse cursus malesuada facilisis.
Nunc consectetur euismod sem quis congue.
Integer lacinia velit sed massa pellentesque, nec venenatis eros venenatis.
Maecenas nec dui lacus. Fusce fringilla velit urna, ac tempus ligula malesuada at.
Donec et mi dui. Nam ac lectus in risus consequat commodo.
Donec suscipit neque nulla, non vulputate odio venenatis ac. Cras in magna eget felis convallis aliquam.
In hac habitasse platea dictumst. Proin in feugiat urna, a condimentum sapien.
Vivamus ultrices, eros sit amet pellentesque aliquet, nulla libero fermentum dui, at pretium sapien urna ut turpis.
Nullam vitae neque neque. Proin pharetra vel dolor eu vehicula.</p>
</div>
</body>
</html>
В этом примере элемент .box1 изначально имеет максимальную высоту 300 пикселей, но для элемента .box2 max-height задан на значении по умолчанию с помощью initial.
Обратите внимание, что начальное значение устанавливает свойство min-height в значение по умолчанию (auto). В то время как начальное значение устанавливает свойство max-height в значение по умолчанию (none).
С наследуемым значением
При использовании значения inherit для свойств CSS min-height и max-height элемент наследует минимальную или максимальную высоту от своего родительского элемента. Это означает, что ограничения высоты, примененные к родительскому элементу, будут также применяться к дочернему элементу.
Пример 6:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min-Height Inherit Example</title>
<style>
.parent {
min-height: 200px;
background-color: lightblue;
}
.child {
min-height: inherit;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="parent">
Parent Container
<div class="child">
Child Container
</div>
</div>
</body>
</html>
В этом примере элементы .parent и .child будут иметь минимальную высоту 200 пикселей, поскольку элемент .child наследует min-height от своего родителя.
Пример 7:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Max-Height Inherit Example</title>
<style>
.parent {
max-height: 200px;
background-color: lightcoral;
}
.child {
max-height: inherit;
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="parent">
Parent Container
<div class="child">
Child Container
</div>
</div>
</body>
</html>
В этом примере элементы .parent и .child будут иметь максимальную высоту 200 пикселей, поскольку элемент .child наследует максимальную высоту от своего родительского элемента.
Обратите внимание: если вы задаете наследуемое значение для min-height или max-height для элемента в CSS, элемент наследует минимальную и максимальную высоту от своего родительского элемента.
В CSS настройка наследовать значение для свойств min-height и max-height может быть полезна, когда вы хотите, чтобы дочерние элементы следовали тем же ограничениям высоты, что и их родительские элементы, поддерживая согласованность во всем макете.
