12

I wanted to set the div height of element to innerHeight of the browser. I dont want css or jQuery to take place here. It has to change its height dynamically with window resize. So i made this script and its not working as i thought.

Here is my code:

window.onload=
window.onresize=function(){
    var left = document.getElementById("left");
    var height = window.innerHeight;
    left.style.height = 'height +('px')';    
}

Can someone correct my code and make it work. Any help will be appreciated.

Thank You.

jsFIDDLE

You can add height:500px; to the left element. and see what i want. But i need to fit the browser height.

SOLVED

//<![CDATA[ 
            function resize()
            {
                var heights = window.innerHeight;
                document.getElementById("left").style.height = heights -50 + "px";
            }
            resize();
            window.onresize = function() {
                resize();
            };
            //]]>

Thanks to Thirumalai murugan's answer.

Improve this question
8
  • Are you getting any error in firebug console?
    – dreamweiver
    Commented Jul 18, 2013 at 9:57
  • no i dint get any error
    – Kishore
    Commented Jul 18, 2013 at 9:58
  • 1
    why would you need this? just add height: 100% to your 'left' css :)
    – Gintas K
    Commented Jul 18, 2013 at 9:59
  • I can't use height:100%. here because i have a another div with height:100% inside this div and made it overflow:scroll. so i need javascript to make this work as i thought.
    – Kishore
    Commented Jul 18, 2013 at 10:13
  • Can u create a fiddle for this
    – dreamweiver
    Commented Jul 18, 2013 at 10:16

4 Answers 4

Reset to default
19

it can be done with CSS3:

just set div heigth using Viewport-Percentage Lengths

div {
    height:100vh;
}

similar question and detailed info here

Improve this answer
1
15

Problem I have found is window.load may fired before DOM element created, you can remove html,body css but that will give some margin to html,body, that should be handle in javascript if you don't want to use the css, #left css rule is used only to understand the div height

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Thirumalai-Window size</title>
        <style type="text/css">
           #left{width:200px;background:red;}
           #inner{height:100%;overflow-y:scroll;}      
           html,body{margin: 0px;}
        </style>
    </head>
    <body>
        <div id="left"></div>
        <script type="text/javascript">//<![CDATA[ 
            function resize()
            {
                var heights = window.innerHeight;
                document.getElementById("left").style.height = heights + "px";
            }
            resize();
            window.onresize = function() {
                resize();
            };
            //]]>  

        </script> 
    </body>
</html>

update

JSFIDDLE

Improve this answer
4
4 
window.onload = window.onresize = function () {
    var left = document.getElementById("left");
    var height = window.innerHeight;
    left.style.height = height + "px";
}

You had an error in last line of the function, it should work now.

Improve this answer
0
1

I solved the 100% height for my google map container with:

document.getElementById("map-canvas").style.height = document.getElementsByTagName("body")[0].offsetHeight + "px";

more details here

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.