Есть ли способ рассчитать автоматическое div высоту, зная размер шрифта и семью? Как браузер вычисляет это? Пример:Как определяется размер div по размеру шрифта
<div style="font-size: 14px; font-family: courier">Text</div>
Над div высота будет 16px; для "font-family: times" будет 17px.
Боюсь, что ответ на ваш вопрос в том, что это не так просто.
Для пропорциональных шрифтов, высота строки является либо
значение line-height свойства, если он установлен в абсолютных длин.
<div style="line-height:20px">Text</div> будет 20px высокой
или значением line-height собственности, умноженной на font-size имуществе, если line-height является безразмерным значением.
<div style="line-height:1.5; font-size:14px">Text</div> будет 21px высокой
или некоторое значение, выбранное в браузере, если line-height установлен в значение по умолчанию normal.
<div style="font-size: 14px;">Text</div> обычно будет около 17px высока, но это может варьироваться в разных браузерах и/или шрифтов
С MONOSPACE шрифтов однако, как «Курьер» в вашем примере, расчет зависит от браузера и настроек браузера ,
Многие браузеры используют меньший размер, чем font-size для моноширинных шрифтов. Это историческое соглашение. Насколько меньше меньше, соглашение не говорит.
Итак, с моноширинными шрифтами все ставки отключены. Сожалею!
Приятно узнать некоторые новые вещи от очень знающих людей. Очень проницательный ответ @MrLister - спасибо :) –
Это даст вам высоту div, перед шрифтом или чем-то еще.
$(document).ready(function(){
var outerHeight = $('div').outerHeight();
alert(outerHeight);
});
Я хотел бы рассчитать высоту div без доступа к DOM. –
Поскольку 'div' является элементом' block level'. Следовательно, это займет '100%' ширину, и она будет занимать высоту по отношению к содержанию внутри него. Без доступа к DOM, как вы можете получить высоту? Либо CSS, либо JS, вы должны обратиться к DOM. Если вы не указали высоту справки Как вы можете определить, какая высота элемента вам нужна. – Samir
В этом случае высота контейнера определяется line-height, который рассчитывается автоматически и может отличаться с использованием разных шрифтов. Вы можете заставить высоту явно задавать высоту строки в CSS.
В этой скрипке я установил линию-высоты первых два див в 20px, а в третьем он рассчитывается браузер: https://jsfiddle.net/wvp476cL/1/
Вы можете получить (и установить) в высоту элемента с помощью JavaScript.
Вы просто хотите получить высоту? Или вы хотите, чтобы div тоже был 14px? –
@HermLuna Я хотел бы рассчитать это, не обращаясь к DOM. –
Я не думаю, что css может получить точную высоту. Что вы с ним сделаете? Возможно, есть еще один способ сделать это без доступа к DOM. –