Solved

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

Posted on 2004-03-22
9
1,166 Views
Last Modified: 2007-12-19
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
Comment
Question by:BruceCheng
  • 5
  • 4
9 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 10649262
Did you try to define the div style by percent?
Like:
<div style="width:100%"></div>

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10649292
Also try to recalculate your div dimensions in the <body onResize="reCalc()">  event.
0
 
LVL 1

Author Comment

by:BruceCheng
ID: 10649906
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 63

Expert Comment

by:Zvonko
ID: 10650134
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
 
LVL 1

Author Comment

by:BruceCheng
ID: 10650576
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
 
LVL 63

Accepted Solution

by:
Zvonko earned 125 total points
ID: 10650620
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
 
LVL 1

Author Comment

by:BruceCheng
ID: 10658650
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
 
LVL 1

Author Comment

by:BruceCheng
ID: 10661119
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 10661249
Thanks for points and for feedback. Simple and Great code!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question