CODEWITHSUNDEEP
javascriptdynamicheight
Thomas Van Duyne
Thomas Van Duyne

Reputation: 1

How to dynamically change Javascript Height

I know that this question has been asked a lot and I assure you I have read a majority of the answers. However, in my case, none of it has worked for me. I am currently trying this:

window.onload = function(){

    var winWidth = parseInt(window.innerWidth);
    var winHeight = parseInt(window.innerHeight);

    document.getElementById("copyRight").innerHTML = winHeight;
    //This is so I could make sure the height was actually changing. It is.

    document.getElementById("grandeContain").style.width = winWidth-15+"px";
    document.getElementById("grandeContain").style.height = winheight+"px";
    document.getElementById("contain").style.width = winWidth-105+"px";
    document.getElementById("contain").style.height = winHeight-90+"px";
    document.getElementById("outside").style.width = winWidth-105+"px";
    document.getElementById("outside").style.height = winHeight-90+"px";
    document.getElementById("aroundToolBar").style.height = winHeight-90+"px";
}

However, no matter what I do the height is not changing onload (I also have this copy and pasted into an onresize function and that doesn't work either). The width parts work fine (not just because that is the default setting for divs; I've tested with many different widths based on window.innerWidth and it changed) but the heights refuses to change. What am I doing wrong? I've always had trouble dynamically changing height and it would be great if I could figure this out once and for all.

Also, if css has anything to do with it, the div tree is like this: grandeContain>contain>(aroundToolBar+outside) where contain is position:relative, aroundToolbar is float:left and width:125px, and outside is position:relative with margin 0 0 0 125px.

Does anyone know what I am doing wrong here?

Also, the 105s and 90s are there soley because of a header and footer in the grandeContain div, with their sibling contain.

Upvotes: 0

Views: 143

Answers (1)

kgarrigan
kgarrigan

Reputation: 133

Did you check in firebug for errors? it seems like on the line:

document.getElementById("grandeContain").style.height = winheight+"px";

you have a typo: should be winHeight+"px" instead of winheight+"px"; maybe causing a variable undefined error.

Upvotes: 1

Related Questions