Как зафиксировать минимальную высоту DIV в количестве строк?

Question

[StrangeAttractor]

Есть DIV некой фиксированной ширины и нефиксированной (свободно меняющейся в зависимости от объёма содержимого) высоты. Количество текста, которое может в нём оказаться заранее неизвестно, это может быть и одна строка, и десять или больше. Надо сделать так, чтобы в случаях, когда строк оказывается меньше пяти, высота дива оказывалась точно такой же, как когда там пять строк текста. Any ideas?

Answer 1

[GreatRash]

div {
  font-size: 14px;
  line-height: 1.3; /* надо обязательно задать line-height, ибо по умолчанию он хз какой будет */

  height: 19.5em; /* допустим нам надо 15 строк текста: 15 * 1.3 = 19.5 */
}

Comments

[StrangeAttractor]

"надо обязательно задать line-height, ибо по умолчанию он хз какой будет" - ну, он должен определяться размером шрифта вообще-то.

[GreatRash]

StrangeAttractor: Нет, размер шрифта к высоте строки не имеет никакого отношения. По умолчанию высота строки в различных браузерах варьируется от 1 до 1.2. Мало того, она меняется в зависимости от шрифта, т.к. разработчик шрифта решает какой будет интерлиньяж. Вот пример, на котором видна разница (в первом случае line-height - 1.125, во втором - 1.1875):

codepen.io/GreatRash/pen/RNGggE

Именно по этому нужно задать высоту строки руками, чтоб было везде одинаково.

Answer 2

[Artem]

min-height: line-height * 5;

Comments

[Максим Гречушников]

это псевдокод или такое реально работает?

[Artem]

Псевдокод, хотя если используется препроцессор (less например) и есть определенная переменная @line-height, то практически так и будет выглядеть выражение.

Answer 3

[haiku]

Поддерживаю ответ выше - em.
Кроме того, если юзаете какой-нить LESS или SASS, то можно задать какой-нить
@line-height: 123px
и затем уже применить это дело к min-height: @line-height;

Comments

[dpismenny]

Вы напугали меня своим @line-height: 123px =) Скорее это будет выглядеть так: min-height: (@line-height * n);

[haiku]

pismenny: виноват =) LESS юзал давно и не слишком уж активно, так что деталей не помню, помню только, что оно это умеет. Хотя по-идее и обыкновенного em должно хватить для этих вещей.

Answer 4

[trushka]

div:before {width:0; float:left; visibility:hidden; content:'1 2 3 4 5'/*5 символов (для верности через пробел)*/}
div:after {clear:both; display:block; content:''}