resizing the div element with window size

Question

surekhavk 0 Newbie Poster

17 Years Ago

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>

html-css web-design

5 Contributors
4 Replies
119 Views
2 Months Discussion Span
Latest Post 17 Years Ago Latest Post by MJ Pieterse

Dani AI

Generated 9 Months Ago

Three practical approaches, depending on whether you want the whole page to scroll (the simplest) or a fixed header/footer with an inner, scrollable content area.

As suggested, letting the document scroll is the simplest option. When an internal scroll region is required (for example you want the header and toolbar to stay fixed while the GridView scrolls), avoid manual viewport math when possible and use modern CSS.

Flexbox (recommended)

Use a column flex container that fills the viewport and make the central pane grow and scroll. This requires a defined page height (100vh or html/body 100%) and overflow on the content area:

html, body { height: 100%; margin: 0; }
.page { display: flex; flex-direction: column; min-height: 100vh; }
.header { height: 100px; }
#div1 { flex: 1 1 auto; overflow: auto; box-sizing: border-box; background: #ccc; }
.footer { height: 50px; }

CSS-only alternative (calc() / viewport units)

If the header/footer heights are known, set the scroll area height directly:

#div1 { height: calc(100vh - 150px); overflow: auto; box-sizing: border-box; }

Caveat: vh can behave unexpectedly on mobile browsers because the address bar changes visible height. See MDN on viewport units for details (viewport percentage lengths).

Small JS fallback (when header height is dynamic)

If header height is dynamic, measure it and sync the content height on load/resize:

function syncContentHeight(){
  var hdr = document.querySelector('.header');
  var content = document.getElementById('div1');
  content.style.height = (window.innerHeight - hdr.offsetHeight) + 'px';
}
window.addEventListener('load', syncContentHeight);
window.addEventListener('resize', syncContentHeight);

Practical tips

Internal scrollbars require an explicit height on the container; overflow:auto alone will not create internal scrolling if height is auto.
Use box-sizing: border-box so padding/borders don’t break your calculations.
For large tables (ASP GridView), set a wrapper overflow-x:auto or table-layout: fixed and width:100% to prevent horizontal overflow.
Add -webkit-overflow-scrolling: touch; for smoother scrolling on iOS.
Consider replacing layout tables with semantic header/content/footer containers to simplify size calculations (as hinted).

More on techniques: see MDN’s Flexbox guide (Basic concepts of Flexbox) and the overflow reference (overflow).

All 4 Replies

MidiMagic 579 Nearly a Senior Poster

17 Years Ago

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.

Reply to this topic

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.

almostbob 866 Retired: passive income ROCKS · Answer 1 · 2009-01-22T06:04:07+00:00

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 2 Junior Poster in Training · Answer 2 · 2009-01-22T06:50:46+00:00

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

MJ Pieterse 2 Poster · Answer 3 · 2009-03-24T04:04:00+00:00

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

resizing the div element with window size

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers