[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

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

Posted on 2004-03-22
9
Medium Priority
?
1,184 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
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 500 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

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.

Question has a verified solution.

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

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…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

650 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