Menu
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.
316
it can be done with CSS3:
just set div heigth using Viewport-Percentage Lengths
div {
height:100vh;
}
similar question and detailed info here
182
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>
JSFIDDLE
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
