How to resize a div automatically based on browser height.

Ramachandran S · 22 February 2013 · Updated 6 March 2013

Looking to re-size any div dynamically based on your browser height then this code can be useful! Add this code in the HTML head area.

<script type="text/javascript" language="JavaScript">// <![CDATA[
function resizediv() 
{ 	
var height=window.innerWidth; 	//To get the browser height in Non-IE browsers 	
if (document.body.clientHeight)
{ 		
    height=document.body.clientHeight;//To get the browser height in IE 	
} 	
height=parseInt(height)-167; //Browser Height minus some px based on your need 	
document.getElementById("divid").style.height=parseInt(height-document.getElementById("divid").offsetTop-8)+"px";
 } 
window.onresize=resizediv;
// ]]></script>

In your body area, add this HTML code,

<div id="divid"></div>

.

.

.

.

<script type="text/javascript">// <![CDATA[
resizediv();
// ]]></script>

Now check this code in various browsers/screen resolution, you will see the div automatically re-sizes. Happy coding!