Question

174

Set div height to window.innerHeight in JAVASCRIPT

rated 0 times [ 177] [ 3] / answers: 1 / hits: 52235 / 11 Years ago, thu, july 18, 2013, 12:00:00

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.

Answers

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

jaredsages

Add To Favorites

Follow

Total Points: 273

Total Questions: 97

Total Answers: 105

Location: French Southern and Antarctic Lands

Member since Fri, Jan 6, 2023

1 Year ago

jaredsages questions

1 Unexpected reserve word 'await'

Tue, Aug 17, 21, 00:00, 3 Years ago

1 React.JS App MODULE_NOT_FOUND error on 'npm start'

Sun, Jan 10, 21, 00:00, 3 Years ago

1 Next-Pwa not working on production server such as Nginx

Fri, Oct 23, 20, 00:00, 4 Years ago

1 How to call Vue instance in chrome console, if he created in a separated file

Mon, Aug 31, 20, 00:00, 4 Years ago

1 Record voice with recorder.js and upload it to python-flask server, but WAV file is broken

Mon, Feb 3, 20, 00:00, 4 Years ago

View All

answered 11 Years ago gilbertomaximilianod · Accepted Answer

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