Adjusting Client Area on Client End

In this short post I will show you how to fix the client area of the web page. I have worked in desktop application, if some of you work in desktop application then you notice one that form will re size according to the resolution of the screen, So here in this post I will try to adjust the size of the client area so that the scroll on the page is not appear and the scroll in the client area is shown. Let us start our example code. I have main table which consist of three rows one is the header, then body and at the end the footer row. And One grid view control which is used to show records to the user and below is the image and here you can see that the grid view control has adjust the height and the height of the grid view control depends the number of record.

Now what I did is , place a div tag in the body row and set the width and height of the div in the onLoad event of the body tag. Below is the javascript which is used to set the height and the with of the divMain to the 92.5 percent.

var divMain=document.getElementById ("<%=divMain.ClientID %>");
divMain.style.height =document.documentElement.clientHeight*.925;
divMain.style.Width=document.documentElement.clientWidth*.925;

Here is the output after setting the width and height on client side. The above code is working fine in the internet explorer but not in the fire fox.

You can download the source code from here

All and any comments / bugs / suggestions are welcomed!