How to get the height in pixels in pure javascript?

Question

I have got a forum with the following HTML structure:

<div id="header">Contents</div>
<div id="main">Contents</div>
<div id="footer">Contents</div>

Basically, I need to set the height of #main to the height of the document minus the height of the other 2 elements. The problem is I have to do it without jquery. I googled the problem and found the clientHeight method, but it returns the height as a number, while I need it as pixels.

So, the question is:

Is there any way to get the height in pixels in pure javascript?

You just have to round it via `Math.round` and add the string `'px'`. But I agree to @evolutionxbox, a CSS solution would be cleaner. — Stephan, Jul 28 '17 at 12:27
The #header and #footer don't have fixed height, otherwise I'd have used CSS. I'll try Stephan's solution and come back with a response. — Wolfuryo, Jul 28 '17 at 12:31
[Don't use JavaScript for this](https://stackoverflow.com/questions/23090136/how-can-i-make-my-flexbox-layout-take-100-vertical-space) — Quentin, Jul 28 '17 at 14:38

score 6 · Accepted Answer · edited Aug 29 '18 at 18:33

The property .clientHeight will return a number (the height in pixels).

In your case, below is the code to reset the height of div#main. Note that we're adding a "px" at the end for .style.height to work:

document.getElementById('main').style.height = parseInt(window.innerHeight) -
document.getElementById('header').clientHeight + 
document.getElementById('footer').clientHeight + "px";

<div id="header">CONTENT</div>
<div id="main">CONTENT</div>
<div id="footer">CONTENT</div>

How to get the height in pixels in pure javascript?

1 Answers1