?
Solved

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

Posted on 2004-03-21
5
Medium Priority
?
641 Views
Last Modified: 2007-12-19
In Windows 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.NET with <div>? Which means, if user resizes the Browser window, I want this <div> resizes with it. If <div> is not big enough to hold all the web content inside it, I want scroll bars automatically added for this <div>. Are there any way to do this?

Thanks a lot.
0
Comment
Question by:BruceCheng
3 Comments
 
LVL 12

Accepted Solution

by:
esteban_felipe earned 336 total points
ID: 10646939
Hi BruceCheng,

Not really... <div> tags are supposed to use all available width of the container tag (all window width if it's inside <body> or all the cell width if it is inside <td>) unless you specify a width in the style property. The height will be set by the content. It will take all the height necessary to render it's content.

If you want scrollbars, then you should move to an IFrame tag.

This is not really related to ASP.NET but rather with HTML code (ASP.Net is the framework that allow you to do object oriented server programming to emit html/javascript code that simulate events). HTML by itself is very limited for appereance.. this is why webmaster/graphics designers usually make good money :)

Esteban Felipe
www.estebanf.com
0
 

Assisted Solution

by:Dekkert
Dekkert earned 332 total points
ID: 10647283
Regarding the scrollbar issue:
Have a look at the overflow property of css. That should do the trick.

Regarding the "resize" issue:
There are a lot of javascripts out there that "measure" the size of the window it's in. Given that, it's possible to dynamically resize the div. Like Esteban said, this has nothing to do with programming, more with HTML/CSS/Javascript.

Good luck!
0
 
LVL 4

Assisted Solution

by:locitt
locitt earned 332 total points
ID: 10654074
try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language=javascript>

window.onload = setAutosize;

function setAutosize()
{
      document.all("theDIV").style.setExpression("width", "document.body.clientWidth");
      document.all("theDIV").style.setExpression("height", "document.body.clientHeight");
}

</script>
</HEAD>

<BODY leftmargin=0 topmargin=0>
<div id=theDIV style="position: absolute; left: 0px, top: 0px; background-color: black; overflow: auto">
</div>
</BODY>
</HTML>


locitt.
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Question has a verified solution.

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

Wouldn’t it be nice if you could test whether an element is contained in an array by using a Contains method just like the one available on List objects? Wouldn’t it be good if you could write code like this? (CODE) In .NET 3.5, this is possible…
A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
Integration Management Part 2
Despite its rising prevalence in the business world, "the cloud" is still misunderstood. Some companies still believe common misconceptions about lack of security in cloud solutions and many misuses of cloud storage options still occur every day. …
Suggested Courses

578 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