мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Свойство min-height

Свойство min-height устанавливает минимальную высоту элемента. Значением свойства служат любые единицы для размеров либо ключевое слово none, означающее отсутствие значения.

Обычно задается для элемента с плавающей шириной (высота задана в процентах или не задана вообще, а элемент по высоте раздвигается своим содержимым).

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

Если же текста больше - высота элемента вычислится в зависимости от количества текста.

Синтаксис

селектор { min-height: значение; }

Пример

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

<div id="elem"> Lorem ipsum dolor sit amet. </div> #elem { min-height: 100px; width: 300px; border: 1px solid black; }

:

Пример

Давайте добавим элементу больше текста - так, чтобы произошло переполнение блока по высоте. В этом случае наш блок просто увеличит свою высоту:

<div id="elem"> какой-то длинный текст... </div> #elem { min-height: 100px; width: 300px; border: 1px solid black; text-align: justify; }

:

Пример

Для сравнения давайте посмотрим, что будет с блоком, если убрать ему минимальную высоту, а вместо нее задать свойство height:

<div id="elem"> какой-то длинный текст... </div> #elem { height: 100px; width: 300px; border: 1px solid black; text-align: justify; margin-bottom: 50px; }

:

Смотрите также

  • свойство max-height,
    которое задает максимальную высоту элемента
  • свойство max-width,
    которое задает максимальную ширину элемента
  • свойство min-width,
    которое задает минимальную ширину элемента