Set div height to window.innerHeight in JAVASCRIPT

Question

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.

why would you need this? just add height: 100% to your 'left' css :) — Gintas K, Jul 18 '13 at 09: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, Jul 18 '13 at 10:13
`height: 100vw;` will make your div the height of the window. — gman, Jun 12 '17 at 08:40

score 19 · Answer 1 · edited May 23 '17 at 12:24

19

it can be done with CSS3:

just set div heigth using Viewport-Percentage Lengths

div {
    height:100vh;
}

similar question and detailed info here

edited May 23 '17 at 12:24

Community

1
1

answered Jan 11 '15 at 15:19

fxdx

399
1
3
9

1

Be advised there are potential pitfalls with this approach in mobile devices. https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser – Robert Wade Nov 05 '18 at 20:04

Thirumalai murugan · Accepted Answer · 2018-01-22T06:03:10.153

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

edited Jan 22 '18 at 06:03

answered Jul 18 '13 at 10:16

Thirumalai murugan

5,698
8
32
54

you code works but it has some problem. it exceeds innerHeight a little – Kishore Jul 18 '13 at 10:24
@Kishore http://stackoverflow.com/questions/7092236/what-is-cdata-in-html see this post will give your enough answer its basically text inside a CDATA section will be ignored by the parser (help full for non javascript browser not to parse this text) – Thirumalai murugan Jul 18 '13 at 10:42
I want to place this side bar between two div. How to do that? – Vinoth Feb 01 '17 at 09:41
@Vinoth please check http://jsfiddle.net/thirumalaimurugan/bPsFV/245/ is it your expectation? – Thirumalai murugan Feb 01 '17 at 10:25

score 4 · Answer 3 · answered Jul 18 '13 at 09:58

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.

answered Jul 18 '13 at 09:58

ase

13,231
4
34
46

score 1 · Answer 4 · answered May 28 '15 at 12:42

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

answered May 28 '15 at 12:42

Augusto

2,125
18
27

Set div height to window.innerHeight in JAVASCRIPT

4 Answers4

update