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

offsetHeight - Returns the height of an element, including borders and padding if any, but not margins

But one of the nested elements inside the div, has a margin-top of 20%, so I get a wrong measurement. I tried style.marginTop and scrollHeight without success.

How can I get the full height (border, padding, margin) of an element (div) in javascript?

If there isn't any other way I'm ok with jQuery.

thetallweeks · Accepted Answer · 2014-05-20 00:47:21Z

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.

Victor · Accepted Answer · 2012-09-29 23:26:44Z

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

I would very much prefer not to (the project isnt really a webpage). But thanks for the jquery solution and fast reply! :)
Traversing the whole DOM with getElementById every time is bad code, and waste of cpu time, and also more code. Edited your answer, caching the elm in a variable.
Also, note that jQuery can report an outerHeight that ignores the top-margin of the first child and the bottom-margin of the last child - see stackoverflow.com/questions/9770248/….
the non-jquery solution gets the element's content height + both margins, but ignores padding and border (and eventual scrollbars) jsfiddle.net/3e2y1j0s/3
This solution assumes the margins are only ever defined in pixel units. For any margins NOT defined in pixel units, it will return incorrect results.

corysimmons · Accepted Answer · 2016-02-05 19:14:33Z

30

var el = document.querySelector('div'); var elHeight = el.offsetHeight; elHeight += parseInt(window.getComputedStyle(el).getPropertyValue('margin-top')); elHeight += parseInt(window.getComputedStyle(el).getPropertyValue('margin-bottom')); console.log(elHeight);

https://jsfiddle.net/gbd47ox1/

I think this solution is more readable, but none of the solutions presented account for sizes that aren't pixels... :(

answered Feb 5, 2016 at 19:14

corysimmons

7,8055 gold badges63 silver badges66 bronze badges

3 Comments

user2490003 Over a year ago

It seems to get the computed height (in pixels) correctly when I set the height in em?

corysimmons Over a year ago

Maybe. I'd test that in various browsers though since they all have different subpixel rounding techniques.

bboydflo Over a year ago

Thanks. Here is a slight optimisation to this solution: ```  function getElementHeight(el) { const $elComputedStyle = getComputedStyle(el); return el.offsetHeight + parseInt($elComputedStyle.getPropertyValue('margin-top') + $elComputedStyle.getPropertyValue('margin-bottom'), 10); } ```

xyhhx · Accepted Answer · 2018-03-06 20:48:05Z

17

Another functional solution using arrow functions:

let el = document.querySelector('div'); let style = window.getComputedStyle(el); let height = ['height', 'padding-top', 'padding-bottom'] .map((key) => parseInt(style.getPropertyValue(key), 10)) .reduce((prev, cur) => prev + cur);

edited Mar 6, 2018 at 20:48

xyhhx

6,6946 gold badges45 silver badges67 bronze badges

answered Nov 28, 2017 at 16:26

EricD

5516 silver badges26 bronze badges

3 Comments

xyhhx Over a year ago

You might wanna add margin-top and margin-bottom

Picard Over a year ago

Heads up, paddings are already included within the style height, but you'll probably need to add margins as suggested.

Ali Hussnain - alichampion Over a year ago

Don't consider calculating padding-top and padding-bottom to the total height as it's already added to height and calculating it again will give you wrong total height.

Fabian von Ellerts · Accepted Answer · 2019-01-08 16:18:27Z

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) }

I really like this Style @fabian-von-ellerts I slightly modified it and put it into my helper Collection. I hope that's okay?

Muhammad Adeel · Accepted Answer · 2019-10-22 08:25:30Z

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) }

the parseInt radix argument is not getting set correctly. I tried to edit your answer but edits have to change at least 6 characters :/
alright sure, .map(k => parseInt(style.getPropertyValue(k)), 10) should be .map(k => parseInt(style.getPropertyValue(k), 10))

qdev · Accepted Answer · 2018-05-23 14:13:31Z

Vanilla JavaScript ECMAScript 5.1

element.getBoundingClientRect() returns a DOMRect object which contains height (including padding & border)
window.getComputedStyle(element) returns an object with all CSS properties after applying active stylesheets and performed any computation (if present)

var element = document.getElementById('myID'), height = element.getBoundingClientRect().height, style = window.getComputedStyle(element); // height: element height + vertical padding & borders // now we just need to add vertical margins height = ["top", "bottom"] .map(function(side) { return parseInt(style['margin-' + side], 10) }) .reduce(function(total, side) { return total + side }, height) // result: compare with devtools computed measurements document.querySelector('.result').innerText = 'Total height is: ' + height + 'px';

#myID { padding: 10px 0 20px; border-top: solid 2px red; border-bottom: solid 3px pink; margin: 5px 0 7px; background-color: yellow; } .result { margin-top: 50px; }

<div id="myID">element</div> <div class="result"></div>

Quicker · Accepted Answer · 2014-12-09 22:45:00Z

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')));

trincot · Accepted Answer · 2019-03-12 21:27:20Z

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;

David Khakim · Accepted Answer · 2020-02-11 12:45:50Z

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));

Collectives™ on Stack Overflow

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

10 Answers 10

Comments

8 Comments

3 Comments

3 Comments

2 Comments

2 Comments

Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Comments

8 Comments

3 Comments

3 Comments

2 Comments

2 Comments

Comments

Comments

1 Comment

Comments

Linked

Related