Member Avatar for 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>
  • 5 Contributors
  • 4 Replies
  • 103 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by MJ Pieterse

Recommended Answers

All 4 Replies

Member Avatar for 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.

Member Avatar for 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,

Member Avatar for ccube921

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

Member Avatar for 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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.