Full height of a html element (div) including border, padding and margin?

Question

I need the full height of a div, I\'m currently using

document.getElementById(\'measureTool\').offsetHeight

offsetHeig

Answer 1

old one - anyway... for all jQuery-banning and shortcut folks out there here is some plus scripting which expands the dimension/getabsoluteheight approaches of the other answers:

function getallinheight(obj) {
  var compstyle=(typeof window.getComputedStyle==='undefined')?obj.currentStyle:window.getComputedStyle(obj);
  var marginTop=parseInt(compstyle.marginTop);
  var marginBottom=parseInt(compstyle.marginBottom);
  var borderTopWidth=parseInt(compstyle.borderTopWidth);
  var borderBottomWidth=parseInt(compstyle.borderBottomWidth);
  return obj.offsetHeight+
         (isNaN(marginTop)?0:marginTop)+(isNaN(marginBottom)?0:marginBottom)+
         (isNaN(borderTopWidth)?0:borderTopWidth)+(isNaN(borderBottomWidth)?0:borderBottomWidth);
}
alert(getallinheight(document.getElementById('measureTool')));

Answer 2

If you can use jQuery:

$('#divId').outerHeight(true) // gives with margins.

jQuery docs

For vanilla javascript you need to write a lot more (like always...):

function Dimension(elmID) {
    var elmHeight, elmMargin, elm = document.getElementById(elmID);
    if(document.all) {// IE
        elmHeight = elm.currentStyle.height;
        elmMargin = parseInt(elm.currentStyle.marginTop, 10) + parseInt(elm.currentStyle.marginBottom, 10) + "px";
    } else {// Mozilla
        elmHeight = document.defaultView.getComputedStyle(elm, '').getPropertyValue('height');
        elmMargin = parseInt(document.defaultView.getComputedStyle(elm, '').getPropertyValue('margin-top')) + parseInt(document.defaultView.getComputedStyle(elm, '').getPropertyValue('margin-bottom')) + "px";
    }
    return (elmHeight+elmMargin);
}

​ Live DEMO

code source

Answer 3

qdev wrote a nice solution, however I think offsetHeight is faster and better supported than getBoundingClientRect(). I also used ES6 to reduce the code size.

/**
 * Returns the element height including margins
 * @param element - element
 * @returns {number}
 */
function outerHeight(element) {
    const height = element.offsetHeight,
        style = window.getComputedStyle(element)

    return ['top', 'bottom']
        .map(side => parseInt(style[`margin-${side}`]))
        .reduce((total, side) => total + side, height)
}

Answer 4

in Vanilla JS in the function getAllmargin we get the sum of both margin top and bottom and with clientHeight we get the height including all paddings

var measureTool = document.getElementById('measureTool');
function getAllmargin(elem){
//Use parseInt method to get only number
        return parseInt(window.getComputedStyle(elem, null).getPropertyValue('margin-top')) 
        + parseInt(window.getComputedStyle(elem, null).getPropertyValue('margin-bottom'));
}
//Finally we get entire height  
console.log(measureTool.clientHeight + getAllmargin(measureTool));

Answer 5

The earlier solutions are probably ideal. In search of an easy way, I came up with something like that. This wraps the target in a div. The height of the div is already calculated and rounded.

<div style="margin: 0; padding: 0; border: none;">
    <p class="target">something info ex</p>
</div>

and in JavaScript:

var height = document.querySelector(".target").parentElement.offsetHeight;

Answer 6

Use all the props, margin, border, padding and height in sequence.

function getElmHeight(node) {
    const list = [
        'margin-top',
        'margin-bottom',
        'border-top',
        'border-bottom',
        'padding-top',
        'padding-bottom',
        'height'
    ]

    const style = window.getComputedStyle(node)
    return list
        .map(k => parseInt(style.getPropertyValue(k), 10))
        .reduce((prev, cur) => prev + cur)
}