Full height of a html element (div) including border, padding and margin?
What about something like this (no jquery)? It's similar to @gdoron's answer but a little simpler. Tested it in IE9+, Firefox, and Chrome.
function getAbsoluteHeight(el) {
// Get the DOM Node if you pass in a string
el = (typeof el === 'string') ? document.querySelector(el) : el;
var styles = window.getComputedStyle(el);
var margin = parseFloat(styles['marginTop']) +
parseFloat(styles['marginBottom']);
return Math.ceil(el.offsetHeight + margin);
}
Here is a working jsfiddle.
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