resizing the div element with window size

[surekhavk]

given below is the css, html, script of my page
want to adjust div as per page resize and need to have scroll bars for the div

<table style="width: 96%; height: 40px;" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td align="left">
                                <img alt="" src="images/silver/btn-login.gif" /><a href="stockregister.aspx"><img
                                    alt="" src="images/silver/btn-reorder.gif" /></a>
                            </td>
                            <td>
                            </td>
                            <td style="color: #FFFFFF" align="left">
                                </td>
                            <td align="right">
                                image image</td>
                        </tr>
                        <tr style="height: 4px; background-color: Black;">
                            <td colspan="4">
                            </td>
                        </tr>
                        <tr>
                            <td align="left" colspan="4">
                                <table border="0" cellpadding="0" cellspacing="1">
                                    <tr>
                                        <td id="help" class="tdmain" align="center">
                                            
                                                help></td>
                                        <td id="email" class="tdmain">
                                            email</td>
                                        <td class="tdmain">
                                            to excel</td>
                                        <td class="tdmain">
                                            reset</td>
                                        <td class="tdmain">
                                            search</td>
                                        <td class="tdmain">
                                            advance search</td>
                                        <td class="tdmain">
                                          
                                               Back
                                        </td>
                                        <td class="tdmain">
                                            first</td>
                                        <td class="tdmain">
                                            prev</td>
                                        <td class="tdmain">
                                        </td>
                                        <td class="tdmain">
                                            next</td>
                                        <td class="tdmain">
                                            last</td>
                                        <td class="tdmain">
                                            .......................
                                        </td>
                                        <td  valign="bottom">
                                            <img alt="" src="images/silver/btn-login.gif" /></td>
                                        <td valign="bottom">
                                            <img alt="" src="images/silver/btn-login.gif" /></td>
                                        <td valign="bottom">
                                            <img alt="" src="images/silver/btn-login.gif" /></td>
                                        <td valign="bottom">
                                            <img alt="" src="images/silver/btn-login.gif"   runat="server" /></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr style="height: 4px; background-color: Black;">
                            <td colspan="3">
                            </td>
                        </tr>
                    </table>
                    <div id="div1" >
<asp:gridview id="gridview1" runat="server">


</asp:gridview>
</div>

css for div

background-color:Gray; 
	 text-align:center; 
	position: static; 
	overflow: auto;
	left: 0; top:0;

script for getting the width /height of browser

<script type="text/javascript">
<!--
  var viewportwidth; var viewportheight;  

 if (typeof window.innerWidth != 'undefined')
  { 
  viewportwidth = window.innerWidth;
  viewportheight = window.innerHeight }
   
    else if (typeof document.documentElement != 'undefined'     && typeof document.documentElement.clientWidth !=     'undefined' && document.documentElement.clientWidth != 0)
     { 
     
      viewportwidth = document.documentElement.clientWidth;
            viewportheight = document.documentElement.clientHeight } 
             // older versions of IE 
              else { viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
                     viewportheight = document.getElementsByTagName('body')[0].clientHeight;
                   
                      }
                
                     
                      var  width= viewportwidth;
                    var height=viewportheight;
                   document.getElementById("div1").style.width =width + "px";
               document.getElementById("div1").style.height = height + "px";
 </script>

[MidiMagic]

There is no browser-independent way to do this, because there is no standard on how the screen size is stored in the browser.

The web is not designed to size things to the browser window. It is NOT like designing a windows program. The web is designed to expand downward as necessary.

Just use the body, and let the scrollbar appear when the content is too large.

[almostbob]

Iagree with midimagic, and at the other end of the scale
a blackberry
footer 100px high, and a
header 100px high,
20px of useful data and ya cant get that **expletive deleted** off the screen,

[ccube921]

I would agree Let the content scroll if it needs to.
By the way, please be articulate and use CODE tags.

[MJ Pieterse]

if you really have an issue with trying to make it fit, use float/fluid for your main window, and use iFrames/Spry scroll menus for the inside content that needs to scroll