Setting height relative to `window.innerHeight` not working

Question

This might be a very stupid question for some people, but I surely am not able to understand the problem behind this. The code is fairly simple, and goes as follows:

HTML:

<!DOCTYPE html> <html lang="en-US"> <head> <title>####</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body onload="resizeDiv();"> <div id="testElement">ABCD</div> <div id="secElement">ABC</div> <script type="text/javascript" src="javascript.js"></script> </body> </html>

CSS:

html , body{ height:100%; } #testElement{ background-color:black; color:white; } #secElement{ font-size:50px; }

JS:

(function immediate(){ document.getElementById('secElement').textContent = window.innerHeight; }()); function resizeDiv(){ document.getElementById('testElement').style.height = (window.innerHeight - 50) * 0.9; }

Now, by this code, the div with id 'testElement' should have an height which is 90% of the window.innerHeight - 20. But, nothing seems to work. Please help.

You have to wrap the JS in a handler like window.onload(function{}) for the ready or loaded events. When your JS is executed right now, the element doesn't yet exist. — Bennett Brown
– Bennett Brown, Commented Oct 31, 2015 at 16:54
@BBrown, I tried to include the function in window.onload, but still no response — codetalker
– codetalker, Commented Oct 31, 2015 at 17:00

brooksrelyt · Accepted Answer · 2021-07-01 17:08:28Z

2

Add "px":

document.getElementById('testElement').style.height = (window.innerHeight - 50) * 0.9 + "px";

edited Jul 1, 2021 at 17:08

brooksrelyt

4,0536 gold badges37 silver badges58 bronze badges

answered Oct 31, 2015 at 17:03

Sudipta Kumar Maiti

1,7091 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ramanlfc · Accepted Answer · 2015-10-31 16:54:55Z

body tag has a onload handler assigned to resizeDiv() but your script is at the bottom of the page so, the onload handler can't refer to it.

Community · Accepted Answer · 2017-05-23 12:23:09Z

1

Use document.getElementById('testElement').setAttribute("style","height:" + (window.innerHeight - 50) * 0.9) + ' px'; You can find more explanation why to use it here: Setting DIV width and height in JavaScript

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Oct 31, 2015 at 17:00

mic4ael

8,4304 gold badges32 silver badges44 bronze badges

3 Comments

mic4ael Over a year ago

Did you replace height with (window.innerHeight - 50) * 0.9?

codetalker Over a year ago

i did everything you mentioned, and by the above answer, I guess the problem was that 'px' string. Anyways, thnx for the help

mic4ael Over a year ago

I forgot to add the ' px' part

Collectives™ on Stack Overflow

Setting height relative to `window.innerHeight` not working

3 Answers 3

Comments

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Linked

Related