Solved

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

Posted on 2004-03-22
9
1,159 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
 
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now