HTML and CSS RSS HTML and CSS RSS

resizing the div element with window size

Reply

•
•
Join Date: May 2008
Posts: 10
Reputation: surekhavk is an unknown quantity at this point 
Solved Threads: 0
surekhavk surekhavk is offline Offline
Newbie Poster

resizing the div element with window size

 
0
  #1
Jan 20th, 2009
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

html Syntax (Toggle Plain Text) 
  1. <table style="width: 96%; height: 40px;" border="0" cellpadding="0" cellspacing="0">
  2.                         <tr>
  3.                             <td align="left">
  4.                                 <img alt="" src="images/silver/btn-login.gif" /><a href="stockregister.aspx"><img
  5.                                     alt="" src="images/silver/btn-reorder.gif" /></a>
  6.                             </td>
  7.                             <td>
  8.                             </td>
  9.                             <td style="color: #FFFFFF" align="left">
  10.                                 </td>
  11.                             <td align="right">
  12.                                 image image</td>
  13.                         </tr>
  14.                         <tr style="height: 4px; background-color: Black;">
  15.                             <td colspan="4">
  16.                             </td>
  17.                         </tr>
  18.                         <tr>
  19.                             <td align="left" colspan="4">
  20.                                 <table border="0" cellpadding="0" cellspacing="1">
  21.                                     <tr>
  22.                                         <td id="help" class="tdmain" align="center">
  23.  
  24.                                                 help></td>
  25.                                         <td id="email" class="tdmain">
  26.                                             email</td>
  27.                                         <td class="tdmain">
  28.                                             to excel</td>
  29.                                         <td class="tdmain">
  30.                                             reset</td>
  31.                                         <td class="tdmain">
  32.                                             search</td>
  33.                                         <td class="tdmain">
  34.                                             advance search</td>
  35.                                         <td class="tdmain">
  36.  
  37.                                                Back
  38.                                         </td>
  39.                                         <td class="tdmain">
  40.                                             first</td>
  41.                                         <td class="tdmain">
  42.                                             prev</td>
  43.                                         <td class="tdmain">
  44.                                         </td>
  45.                                         <td class="tdmain">
  46.                                             next</td>
  47.                                         <td class="tdmain">
  48.                                             last</td>
  49.                                         <td class="tdmain">
  50.                                             .......................
  51.                                         </td>
  52.                                         <td  valign="bottom">
  53.                                             <img alt="" src="images/silver/btn-login.gif" /></td>
  54.                                         <td valign="bottom">
  55.                                             <img alt="" src="images/silver/btn-login.gif" /></td>
  56.                                         <td valign="bottom">
  57.                                             <img alt="" src="images/silver/btn-login.gif" /></td>
  58.                                         <td valign="bottom">
  59.                                             <img alt="" src="images/silver/btn-login.gif"   runat="server" /></td>
  60.                                     </tr>
  61.                                 </table>
  62.                             </td>
  63.                         </tr>
  64.                         <tr style="height: 4px; background-color: Black;">
  65.                             <td colspan="3">
  66.                             </td>
  67.                         </tr>
  68.                     </table>
  69.                     <div id="div1" >
  70. <asp:gridview id="gridview1" runat="server">
  71.  
  72.  
  73. </asp:gridview>
  74. </div>




css for div

css Syntax (Toggle Plain Text) 
  1. background-color:Gray; 
  2. 	 text-align:center; 
  3. 	position: static; 
  4. 	overflow: auto;
  5. 	left: 0; top:0;


script for getting the width /height of browser

JavaScript Syntax (Toggle Plain Text) 
  1. <script type="text/javascript">
  2. <!--
  3.   var viewportwidth; var viewportheight;  
  4.  
  5.  if (typeof window.innerWidth != 'undefined')
  6.   { 
  7.   viewportwidth = window.innerWidth;
  8.   viewportheight = window.innerHeight }
  9.  
  10.     else if (typeof document.documentElement != 'undefined'     && typeof document.documentElement.clientWidth !=     'undefined' && document.documentElement.clientWidth != 0)
  11.      { 
  12.  
  13.       viewportwidth = document.documentElement.clientWidth;
  14.             viewportheight = document.documentElement.clientHeight } 
  15.              // older versions of IE 
  16.               else { viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
  17.                      viewportheight = document.getElementsByTagName('body')[0].clientHeight;
  18.  
  19.                       }
  20.  
  21.  
  22.                       var  width= viewportwidth;
  23.                     var height=viewportheight;
  24.                    document.getElementById("div1").style.width =width + "px";
  25.                document.getElementById("div1").style.height = height + "px";
  26.  </script>
Last edited by peter_budo; Jan 22nd, 2009 at 7:17 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,203
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: resizing the div element with window size

 
0
  #2
Jan 21st, 2009
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.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 1,316
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 161
almostbob's Avatar
almostbob almostbob is online now Online
Nearly a Posting Virtuoso

Re: resizing the div element with window size

 
0
  #3
Jan 21st, 2009
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,
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 76
Reputation: ccube921 is an unknown quantity at this point 
Solved Threads: 6
ccube921 ccube921 is offline Offline
Junior Poster in Training

Re: resizing the div element with window size

 
0
  #4
Jan 21st, 2009
I would agree Let the content scroll if it needs to.
By the way, please be articulate and use CODE tags.
If I have been helpful add to my reputation!
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2009
Posts: 77
Reputation: mj080 is an unknown quantity at this point 
Solved Threads: 5
mj080's Avatar
mj080 mj080 is offline Offline
Junior Poster in Training

Re: resizing the div element with window size

 
0
  #5
Mar 23rd, 2009
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
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC