Vertical dynamic resizing of a page to fit the users screen

twitaboy · Sep 11, 2004

Hi Tek-tips readers,
I'm trying to edit the template of a new site to include vertical dynamic resizing, and the requirements have outstripped my HTML / javascript skills.

The rough template for my site is here:

http://mattg.com.au/temp/layout/

As you can see, the page adjusts dynamically horizontally to fit the users screen. What I'm trying to do is have the white text area increase in size dynamically to push the bottom red footer area to the bottom of the page when the text is short.

Any suggestions?

Thanks for your time,
twitaboy

glenmac · Sep 11, 2004

Hmm this should work untested though.

Code:

<head>
<script>function maxWindow() {
self.resizeTo(self.screen.width, self.screen.height);
}
</script>
</head>
<body onLoad="maxWindow();">test
</body>

Glen

http://lantzvillecomputers.ca

twitaboy · Sep 12, 2004

Thanks Glenmac, but I think I mistated what I was actually trying to do.

What I'm after isn't adjusting the browser size as a whole, instead the white section within the page itself.

I'm looking for the red bottom bar to always be at the bottom of the page, increasing the white main area when the users browser is larger vertically than the content.

So if the page was long (which would require virtical scrolling) the reb bar appears at the bottom of the scrolled page, and if the page is short and does not require scrolling it is at the bottom of the browser regardless of whether or not the main content text is small.

Thanks for your time.

chessbot · Sep 12, 2004

do you have an example where the text is short?

you can use valign="bottom" or style="valign:bottom;"

--Chessbot

arst06d · Sep 13, 2004

Hi

how about putting the page content in a table wih height set to 100%.
Header stuff goes in row 1
page content goes in row 2 with height="90%" on the <tr>
footer stuff goes in row 3

on the <body> call a function onResize, to dynamically resize row2 to 90% again

If the content in row2 is large, it will ignore the restriction and give it enough space, pushing row3 down and the browser window will have scrollbars.
If content is short, the table will take up 100 of the height, and the footer row will be at the bottom of the browser window.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">


function changeIt()
{
alert(document.getElementById("theRow").height);
var row = document.getElementById("theRow");
var div = document.getElementById("theDiv");
row.height = '90%';
div.innerHTML = row.height;
}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" onResize="javascript:changeIt();">
<table width="95%" border="1" align = "center" height="100%">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="theRow" height="90%">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div id="theDiv"></div>
</body>
</html>

vongrunt · Sep 13, 2004

Should work for transitional DTD... otherwise expect problems with percentage heights.
Btw. maybe I missed something but javascript may be not necessary:

Code:

<html>
<head></head>
<body>
<table style="height: 100%; width: 100%;">
  <tr style="height: 50px; background-color: green;">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr style="vertical-align: top;">
    <td>Left</td>
    <td>Middle</td>
    <td>Right</td>
  </tr>
  <tr style="height: 50px; background-color: red;">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

twitaboy · Sep 13, 2004

Thanks to all four of you for the great responses. I've gone with vongrunt's solution and it is working well.

mmmmmm perty pages.

Thanks again to you all,
twitaboy

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Vertical dynamic resizing of a page to fit the users screen

twitaboy

Programmer

glenmac

Technical User

twitaboy

Programmer

chessbot

Programmer

arst06d

Programmer

vongrunt

Programmer

twitaboy

Programmer

Similar threads

Part and Inventory Search

Sponsor