Solved

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

Posted on 2004-03-22
9
1,171 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

688 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