CSS Min Height - установка минимальной высоты с помощью CSS

CSS свойство min-height позволяет установить минимальную высоту элемента. Это означает, что высота элемента не будет меньше указанного значения, даже если его содержимое меньше.

Примеры кода:

1. Установка минимальной высоты для блока:

css
.container {
  min-height: 200px;
}

Этот код установит минимальную высоту 200 пикселей для элемента с классом "container". Если содержимое этого блока займет меньше места, то его высота все равно будет 200 пикселей.

2. Установка минимальной высоты для изображения:

css
img {
  min-height: 100px;
}

Этот код установит минимальную высоту 100 пикселей для всех изображений на странице. Таким образом, даже если изображение имеет размеры меньше указанного значения, оно будет занимать минимальную высоту 100 пикселей.

3. Использование min-height вместе с другими свойствами:

css
.card {
  min-height: 300px;
  height: auto;
}

В этом примере блоку с классом "card" установлена минимальная высота 300 пикселей и автоматическая высота. Это означает, что если содержимое блока будет больше 300 пикселей, то его высота будет автоматически увеличиваться для отображения всего содержимого. Если содержимое блока меньше 300 пикселей, то его высота все равно будет 300 пикселей.

Обратите внимание, что min-height работает только в том случае, если элементу установлено свойство height или высота задана явно. Если высота элемента установлена как "auto" (автоматическая высота), то min-height не будет иметь эффекта.