• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1189
  • Last Modified:

How to make fixed sized <div> auto resize with the browser window?

In Windows .NET application, we can use Anchor property to "link" Windows control to the edge of the windows form. When user resizes the Windows form, the control resizes together with the Widnows form.

Can I do the same thing in ASP with <div>? I want to use <div> to replace frame in my application so that I won't have those issues of refreshing pages in different frames. So I have width and length and overflow style sheet attributes in my <div> tag. If <div> is not big enough to hold all the web content inside it, scroll bars will be automatically added to my <div>. The problem is, if user resizes the Browser window, I need this <div> resizes with it. Are there any way to do this?

Thanks a lot.
0
BruceCheng
Asked:
BruceCheng
  • 5
  • 4
1 Solution
 
ZvonkoSystems architectCommented:
Did you try to define the div style by percent?
Like:
<div style="width:100%"></div>

0
 
ZvonkoSystems architectCommented:
Also try to recalculate your div dimensions in the <body onResize="reCalc()">  event.
0
 
BruceChengAuthor Commented:
Thanks for the help. But the height of the <div> still does not resize even after I added height:100% into the <div> style sheet attribute. The height of the <div> is not auto-resizing at all. Only the width of the <div> is auto-resizing.

Any other suggestions for the height of the <div>?

Thanks a lot.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
ZvonkoSystems architectCommented:
Like this:

<html>
<head>
<script>
function reCalc(){
  document.getElementById('myID').style.height = document.body.clientHeight/2;
}
</script>
</head>
<body onResize="reCalc()" onLoad="window.resizeTo(400, 800)">
<div id="myID" style="width:100%; height:400px; background-color: yellow;"></div>
</body>
</html>

0
 
BruceChengAuthor Commented:
Thanks a good suggestion. One more simple question, how to calculate the distance (pixel) from the top of the <div> to the upper inner edge of the browser window? After I get this, I can calculate the height of my <div> to take the reset of the space to the bottom of the browser window, just as a frame.

Thanks a lot.
0
 
ZvonkoSystems architectCommented:
Like this:

<html>
<head>
<script>
function reCalc(){
  myDiv = document.getElementById('myID');
  myDiv.style.height = (document.body.clientHeight-myDiv.offsetTop)/2;
}
</script>
</head>
<body onResize="reCalc()" onLoad="window.resizeTo(400, 800)">
<div style="width:100%; height:100px; background-color: red;"></div>
<div id="myID" style="width:100%; height:400px; background-color: yellow;"></div>
</body>
</html>

0
 
BruceChengAuthor Commented:
Thanks for your help. But looks like I have to add attribute:
position:absolute;
to my <div> tag in order to use "offsetTop" to calculate the distance from my <div> to the upper edge of the browser window. Are there any way to calculate this distance without using absolute position?

Another thing, does anybody know how to get the background color of the parent table of my <div> from JavaScript?

Thanks a lot.
0
 
BruceChengAuthor Commented:
I figured out that the following is the way to calculate div size without using absolute position:

function reCalculateDivSize()
{
  var divMain = document.getElementById('divMain');
 
  if(divMain != null)
  {
      var nTop=divMain.offsetTop;
      var nLeft=divMain.offsetLeft;
      var oParent=divMain.offsetParent;
      
      while(oParent != null)
      {
            nTop += oParent.offsetTop;
            nLeft += oParent.offsetLeft;
            oParent = oParent.offsetParent;
      }
      
      var nHeight = document.body.clientHeight-nTop;
      divMain.style.height = nHeight > 0 ? nHeight : 0;
      var nWidth = document.body.clientWidth-nLeft;
      divMain.style.width = nWidth > 0 ? nWidth : 0;
  }
}
0
 
ZvonkoSystems architectCommented:
Thanks for points and for feedback. Simple and Great code!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now