Question

15

JS - set window height using current window size

rated 0 times [ 19] [ 4] / answers: 1 / hits: 32873 / 12 Years ago, thu, january 24, 2013, 12:00:00

I have some CSS that needs the body to have a height set, but this needs to be done depending on the user.

I have made some code that kind of works - it calculates the window height but it's not changing the body height. What am I doing wrong?

function setWindowHeight(){

    var windowHeight = window.innerHeight;

    document.getElementsByTagName('body').style.height = windowHeight + px;

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

koltonadolfow

Add To Favorites

Follow

Total Points: 71

Total Questions: 118

Total Answers: 102

Location: Vietnam

Member since Sun, Oct 18, 2020

4 Years ago

answered 12 Years ago karivictoriab · Accepted Answer

You need to add an eventListener, and you don't need to use the getElementsByTagName because has only 1 body tag:

function setWindowHeight(){

    var windowHeight = window.innerHeight;

    document.body.style.height = windowHeight + px;

    console.log(document.body.style.height);

}

window.addEventListener(resize,setWindowHeight,false);

Or, if you want to use, you can do this:

function setWindowHeight(){

    var windowHeight = window.innerHeight;

    document.getElementsByTagName('body')[0].style.height = windowHeight + px;

    console.log(document.body.style.height);

//---------------------------------------´

//will get the first element tagged body

}

window.addEventListener(resize,setWindowHeight,false);

EDIT (Changed the code above): you can check the value in the Firefox Console. Open it(CTRL + SHIFT + K) and resize the window, you will see the event resize be fired when you do it.