How Is Div Height Calculated From Font Size

Is there is a way to calculate automatic div height knowing contained font size and family? How does browser calculate this? Example:

For proportional fonts, the line height is either

• the value of the line-height property if it's set in absolute lengths. <div style="line-height:20px">Text</div> will be 20px high

• or the value of the line-height property multiplied by the font-size property if the line-height is a unitless value. <div style="line-height:1.5; font-size:14px">Text</div> will be 21px high

• or some value chosen by the browser if line-height is set to its default value of normal. <div style="font-size: 14px;">Text</div> will usually be around 17px high, but this may vary among browsers and/or fonts

With monospace fonts however, like "Courier" in your example, the calculation depends on the browser and the browser settings. Many browsers use a smaller size than the font-size for monospace fonts. This is a historical convention. How much smaller exactly, the convention doesn't say. So with monospace fonts, all bets are off. Sorry!

Solution 2:

This will give you the height of the div, prior to the font or something else.

 $(document).ready(function(){

     var outerHeight = $('div').outerHeight();
     alert(outerHeight);

});

Refer here

Solution 3:

In this case the height of the container is determined by line-height, which is calculated automatically and may differ using different fonts. You can force the height explicitly setting the line-height in CSS.

In this fiddle I set the first two divs' line-heights at 20px, while in the third it is calculated by the browser: https://jsfiddle.net/wvp476cL/1/

You can get (and set) an element height using javascript.

Share