javascript - Find element height, including margin -

i'm making simple , fun drawing app, , in structure follows:

• header
• canvas
• footer

i'm trying canvas full height of window, minus header height , footer height.

i've tried multiple things like:

canvas.height = window.height - (document.getelementbyid("header").offsetheight + document.getelementbyid("footer").offsetheight); 

and i've tried:

function getheight(id) {     id = document.getelementbyid(id);     return id.offsetheight + id.style.margintop + id.style.marginbottom; }  canvas.height = window.height - (getheight("header") + getheight("footer")) 

but no avail. in console id.style.margintop returned empty string, although margintop set in css... not set margintop, it's set margin: 8px 0 8px 0;

is there way, without using jquery, obtain rendered height of element, including margin?

i'm assuming we'd have separate margin: 8px 0 8px 0; separate variables, using id.style.margin... i'm not sure how separate it.

function outerwidth(el) {   var width = el.offsetwidth;   var style = getcomputedstyle(el);    width += parseint(style.marginleft) + parseint(style.marginright);   return width; } 

this jquery's outerwidth doing, scratched ::http://youmightnotneedjquery.com/ might interteresting further develpoment

edit: in ie8 have use el.currentstyle[prop] instead of getcomputedstyle(el);