I'm making a simple and fun drawing app, and in it the structure is as follows:
- Header
- Canvas
- Footer
I'm trying to get the canvas to be the full height of the window, minus the header height and footer height.
I've tried multiple things like:
canvas.height = window.height - (document.getElementById("header").offsetHeight + document.getElementById("footer").offsetHeight);
And I've even 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 to no avail. In the console id.style.marginTop just returned an empty string, although its marginTop is set in the css... just not set specifically to marginTop, it's set as margin: 8px 0 8px 0;
Is there any way, without using jQuery, to obtain the rendered height of an element, including margin?
I'm assuming we'd have to separate the margin: 8px 0 8px 0; into separate variables, using id.style.margin... but I'm just not sure how to separate it.
I'm making a simple and fun drawing app, and in it the structure is as follows:
- Header
- Canvas
- Footer
I'm trying to get the canvas to be the full height of the window, minus the header height and footer height.
I've tried multiple things like:
canvas.height = window.height - (document.getElementById("header").offsetHeight + document.getElementById("footer").offsetHeight);
And I've even 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 to no avail. In the console id.style.marginTop just returned an empty string, although its marginTop is set in the css... just not set specifically to marginTop, it's set as margin: 8px 0 8px 0;
Is there any way, without using jQuery, to obtain the rendered height of an element, including margin?
I'm assuming we'd have to separate the margin: 8px 0 8px 0; into separate variables, using id.style.margin... but I'm just not sure how to separate it.
- did you remember to replace "id" in the parentheses with the actual element's ID? Surely you don't have an id named "id"? – TylerH Commented Apr 9, 2015 at 20:09
- @TylerH I've edited the question to compensate for the confusion I caused. – Elegant.Scripting Commented Apr 9, 2015 at 20:12
- For me personally, I create my header as a separate file and create an outer-wrapper in it, but don't close the div. Then you create your canvas page, and close out the outer-wrapper at the bottom before you include your footer file. Then the canvas will be the exact size between your header and footer. Hope that helps. – Fata1Err0r Commented Apr 9, 2015 at 20:18
- @Fata1Err0r I'm having some trouble visualizing what you're saying. – Elegant.Scripting Commented Apr 9, 2015 at 20:27
- @Elegant.Scripting I create a header file, my main page, and my footer file. In my header, I create a DIV wrapper that's going to wrap both my header/main contents together, but I don't close the DIV yet. On my main page, leave out the normal initial HTML tags (<head> <body> etc...) and at the bottom you put your </div> to close the DIV wrapper from the header, and then use PHP to include the footer file at the bottom. You'll use PHP to include the header at the top of the main page too. This keeps main page exact size of the space between the header/footer. – Fata1Err0r Commented Apr 9, 2015 at 20:37
2 Answers
Reset to default 15function outerWidth(el) {
var width = el.offsetWidth;
var style = getComputedStyle(el);
width += parseInt(style.marginLeft) + parseInt(style.marginRight);
return width;
}
this does exactly what jquery's outerwidth is doing, scratched from ::http://youmightnotneedjquery.com/ might be interteresting for further develpoment
EDIT: in ie8 you have to use el.currentStyle[prop] instead of getComputedStyle(el);
You could use a flex solution and not worry about calculating the height:
CSS:
.container {
display: flex;
flex-direction: column;
height: 100%;
}
canvas {
flex: 1;
}
HTML:
<div class="container">
<header>...</header>
<canvas>...</canvas>
<footer>...</footer>
</div>
Fiddle