Вычислить высоту окна CSS вручную

Question

У меня есть div с определенным размером шрифта и высотой строки. Какова правильная математическая формула для расчета высоты окна (включая прокладку)?

<div style="padding: 15px; background-color: #ccc; font-size: 18px; line-height: 1.4em;"> 
       text 
</div> 

Answer 1

Просто используйте .offsetHeight, например.

var height = document.getElementById(id_attribute_value).offsetHeight; 

Смотрите HTMLElement.offsetHeight docs для получения дополнительной информации

HTMLElement.offsetHeight свойство только для чтения является высотой элемента в том числе вертикальной прокладки и границ, в пикселях, как целого числа.

Если вы хотите исключить границу элемента, достаточно указать .innerHeight. Кроме того, .getBoundingClientRect() возвращает дробное значение (при необходимости)

• Примечание: для решения JQuery, проверить .height(), .outerHeight() и .innerHeight()

---

JSFiddle Link - демо

Answer 2

я предполагаю вы хотите сделать это как умственное упражнение, а не использовать его для производства. Для этого вам необходимо подсчитать количество строк (пример on JSFiddle)

font-size:  18px 
line-height:  1.4em = 25.2px => rounded to 25px 
number of lines: 7 

height (no padding) = 25 * 7 = 175px 
height (with padding) = 175 + 15 * 2 = 205