All geek questions in one place

Set div height in window.innerHeight in JAVASCRIPT

I wanted to set the height of the div element in the innerHeight of the browser. I don't want css or jQuery to have a place here. It should dynamically change its height with the resizing of the window. Therefore, I made this script and did not work 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 fix my code and make it work. Any help would be appreciated.

Thanks.

jsFIDDLE

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

solvable

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

Thanks Thirumalai murugan answer.

+4
source share
4 answers

The problem I discovered can be triggered before creating the DOM element window.load , you can remove html,body css, but this will provide some margin for html,body , which should be processed in javascript if you do not want to use the css rule, #left css is only used to understand 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

+10
source

this can be done using CSS3:

just set the heigth div using percent view lengths

 div { height:100vh; }

similar question and details here

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

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

+3
source

I decided 100% height for my google map container:

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

more details here

0
source

Source: https://habr.com/ru/post/1492049/

More articles:


All Articles