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!

  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Page Height 100% length of browser window

Status
Not open for further replies.

JamesCliff

Programmer
Feb 16, 2005
106
GB
Hi all, this is my site


Im still making it now so its not finished yet. The site is set at 780 px in width, and has a dynamic or liquid height in such terms. If you click on the link above, you will be taken to the blank home page. You will see on the home page that there is no content so the site index page is small in the browser and in most resolutions does not take up the full height of the browser.

Now what im trying to do is get it so that if there is little or no content on a page the page lengthens out to the length of the browser window, so that there is no gap between the bottom of the site and the bottom of the browser window, and the content box of the index.php stretches out to the bottom of the browswer. When there is loads of content on one page eg. the sales page, then it dosnt matter because the amount of content is so high, the page would auto stretch as much as it needed, thus making the page over fill the browser window creating a scroll bar.

So basiclly i want the page to auto stetch to the bottom of the browser window when it hasnt enough or has no content to make it longer than the browser window if you understand me. However at the same time i do not want it to create a vertical scroll bar, just want it level with the bottom.

Here is my page code so you can see the structure of my index.php:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>GB Plant and Machinery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel='stylesheet' href='config/style.css' type='text/css'>

</head>

<body>
<?php
if (!$_GET["page"]) {
  $_GET["page"] = "home";
}
$content = $_GET["page"] . ".php";
if (!file_exists($content)) {
  $content = "404.php";
}
?>
<table width="100%" height="46%" border="0" align="center" cellspacing="0" cellpadding="0">
  <tr>
    <td height="211" valign="top"><table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr> 
          <td height="113" colspan="7"><img src="images/index_01.gif" width="780" height="113"></td>
        </tr>
        <tr> 
          <td width="7"><img src="images/index_02.gif" width="7" height="23"></td>
          <td width="138"><a href="index.php?page=home"><img src="images/index_03.gif" width="138" height="23" border="0"></a></td>
          <td width="155"><a href="index.php?page=sales"><img src="images/index_04.gif" width="155" height="23" border="0"></a></td>
          <td width="162"><a href="index.php?page=about"><img src="images/index_05.gif" width="162" height="23" border="0"></a></td>
          <td width="165"><a href="index.php?page=contact"><img src="images/index_06.gif" width="165" height="23" border="0"></a></td>
          <td width="146"><a href="index.php?page=admin"><img src="images/index_07.gif" width="146" height="23" border="0"></a></td>
          <td width="7"><img src="images/index_08.gif" width="7" height="23"></td>
        </tr>
        <tr>
          <td height="17" colspan="7"><img src="images/index_09.gif" width="780" height="17"></td>
        </tr>
        <tr> 
          <td colspan="7"><table width="780" border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td height="100%" background="images/index_16.gif" bgcolor="E6E8E8"><?php include($content); ?></td>
              </tr>
              <tr> 
                <td height="40"><img src="images/index_15.gif" width="780" height="40"></td>
              </tr>
            </table></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

Thanks alot in advance.

Im fairly stuck with this one so any help is greatly appriciated.

Thanks again

Jim
 
First, very nice website start. I really like your graphical style. It all looks very clean.

If you do a "view source" in your browser looking at the output (not the php file), you'll note that you send the doctype, html tag, header, and body tags twice. Looks like <?php include($content); ?> is the culprit, sending an entire html document instead of just content. I imagine you'll have a harder time getting the page to cooperate with that as it will put the browser in quirks mode despite your doctype and generally cause unpredictability.

As far as how to make the table take up the entire size of the height, I think you'll have trouble there making it work across browsers. You can try making the table take up 100% height and then the body cell will theoretically (possibly IE only) take up 100% of available height within the table by giving it a 100% as well (and nowhere else).

The child won't push the parent farther with percentages though, the parent needs to already cover the height you desire. (Well, maybe if you used > 100%, but that wouldn't get you what you want either.)

My advice would be to convert the tables to div containers and use style sheets to set the formatting you want. See my post near the end of this thread for an example of that. Style sheets have their issues too, mind you, but.... I'm sure others here will be able to offer different ideas.
 
You may want to check alistapart for some similar advice.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Thanks for the help guys.

Oppcos im currently trying to implement your way of doing it ill let you know how it goes. Thanks for the compliment on the site by the way, im designing it for a client. Your right about the view source problem. Ill get onto that straight away, thanks for pointing it out. Its going to be hard for me to set up this container div thing because of the structure of the tables etc. I am finding it hard

Im also using the alistapart site traingamer posted for more help to. Again it is hard. I tried setting 100% height for all 3 of my tables and then specifing the content box cell with 100% height as well. This did achieve what i wanted, however small gabs appeared between different rows of my table at the top. If it wasnt for them it would have worked a treat. Ill post the code below for what i did and maybe someone could troubleshoot the gab error between rows, thus distorting my site.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>GB Plant and Machinery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel='stylesheet' href='config/style.css' type='text/css'>

</head>

<body>
<?php
if (!$_GET["page"]) {
  $_GET["page"] = "home";
}
$content = $_GET["page"] . ".php";
if (!file_exists($content)) {
  $content = "404.php";
}
?>
<table width="100%" height="100%" border="0" align="center" cellspacing="0" cellpadding="0">
  <tr>
    <td height="211" valign="top"><table width="780" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr> 
          <td height="113" colspan="7"><img src="images/index_01.gif" width="780" height="113"></td>
        </tr>
        <tr> 
          <td width="7"><img src="images/index_02.gif" width="7" height="23"></td>
          <td width="138"><a href="index.php?page=home"><img src="images/index_03.gif" width="138" height="23" border="0"></a></td>
          <td width="155"><a href="index.php?page=sales"><img src="images/index_04.gif" width="155" height="23" border="0"></a></td>
          <td width="162"><a href="index.php?page=about"><img src="images/index_05.gif" width="162" height="23" border="0"></a></td>
          <td width="165"><a href="index.php?page=contact"><img src="images/index_06.gif" width="165" height="23" border="0"></a></td>
          <td width="146"><a href="index.php?page=admin"><img src="images/index_07.gif" width="146" height="23" border="0"></a></td>
          <td width="7"><img src="images/index_08.gif" width="7" height="23"></td>
        </tr>
        <tr>
          <td height="17" colspan="7"><img src="images/index_09.gif" width="780" height="17"></td>
        </tr>
        <tr> 
          <td colspan="7"><table width="780" height="100%" border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td height="100%" background="images/index_16.gif" bgcolor="E6E8E8"><?php include($content); ?></td>
              </tr>
              <tr> 
                <td height="40"><img src="images/index_15.gif" width="780" height="40"></td>
              </tr>
            </table></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

Can anyone figure out why the rows at the top split and form a gap at the top of my page either side of the nav bar.

Or is there another easier way to achieve my goal.

Thanks alot

Jim
 
Since you are using PHP, do you mind uploading your current progress somewhere so I can view the issue you are having?
 

i actually had this question, and since you asked it, maybe we can both find our answer.

a good example of this is activestate.com website. no matter what you open the window to, it keeps the footer at the bottom of the screen.

any idea how this is possible?

- g
 
Yeh Spewn we can hopefully come up with a solution together.

Oppcos this my site with the table heights and content cell changed to 100% height:


This is the code i am using:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>GB Plant and Machinery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel='stylesheet' href='config/style.css' type='text/css'>

</head>

<body>
<?php
if (!$_GET["page"]) {
  $_GET["page"] = "home";
}
$content = $_GET["page"] . ".php";
if (!file_exists($content)) {
  $content = "404.php";
}
?>
<table width="100%" height="100%" border="0" align="center" cellspacing="0" cellpadding="0">
  <tr>
    <td height="211" valign="top"><table width="780" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr> 
          <td height="113" colspan="7"><img src="images/index_01.gif" width="780" height="113"></td>
        </tr>
        <tr> 
          <td width="7"><img src="images/index_02.gif" width="7" height="23"></td>
          <td width="138"><a href="index.php?page=home"><img src="images/index_03.gif" width="138" height="23" border="0"></a></td>
          <td width="155"><a href="index.php?page=sales"><img src="images/index_04.gif" width="155" height="23" border="0"></a></td>
          <td width="162"><a href="index.php?page=about"><img src="images/index_05.gif" width="162" height="23" border="0"></a></td>
          <td width="165"><a href="index.php?page=contact"><img src="images/index_06.gif" width="165" height="23" border="0"></a></td>
          <td width="146"><a href="index.php?page=admin"><img src="images/index_07.gif" width="146" height="23" border="0"></a></td>
          <td width="7"><img src="images/index_08.gif" width="7" height="23"></td>
        </tr>
        <tr>
          <td height="17" colspan="7"><img src="images/index_09.gif" width="780" height="17"></td>
        </tr>
        <tr> 
          <td colspan="7"><table width="780" height="100%" border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td height="100%" background="images/index_16.gif" bgcolor="E6E8E8"><?php include($content); ?></td>
              </tr>
              <tr> 
                <td height="40"><img src="images/index_15.gif" width="780" height="40"></td>
              </tr>
            </table></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

I cant understand why there is a gap eitherside of the nav bar, its like the rows have been pulled apart. Is there another height % i need to specify within the code?

Thanks alot

Jim
 
I see it now. A gap on either side, just below Home and Admin as it were.

The gap doesn't appear in FireFox (though there is another issue with height there). That probably means IE is freaking out about white space between table tags. Although it will be ugly, delete any new lines and white space that isn't necessary around that area of your design and see if that doesn't get rid of that. I've seen a similar issue before that took forever to stumble upon the solution. It's just an IE thing.
 
Jim,

I would strongly suggest to you to take a top-down approach to producing a screen. i.e. forget about your content for now and just using background colors get the structure of your layout.

As I see it you have 2 choices for a cross-browser solution:

1. Use a table as you are now. Don't even add css until you get your table to contract and expand in the browser.
The problem with this approach is that you will have to use height="100%" and this will not validate with a proper doctype.

2. Use Javascript with css position:relative top:Xpx
where X=(screen-height/2)-(div-height/2).

to get screen-height the simple way is:
Code:
<script>
var h=0;  
h = document.getElementsByTagName('html')[0].clientHeight;
if(h==0){h = window.innerHeight;}
if(h==0){h = document.body.clientHeight;} 
//test to see you got it:
alert("height = "+h)
</script>

then in the body tag:
<body onresize="window.location.href = window.location.href">



Clive
 

here is your code cleaned up...

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>GB Plant and Machinery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel='stylesheet' href='config/style.css' type='text/css'>
</head>
<body>
<table width="100%" height="100%" border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<td height="211" valign="top">

<table width="780" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr> 
<td height="113" colspan="7"><img src="images/index_01.gif" width="780" height="113"></td>
</tr>
<tr> 
          <td width="7"><img src="images/index_02.gif" width="7" height="23"></td>
          <td width="138"><a href="index.php?page=home"><img src="images/index_03.gif" width="138" height="23" border="0"></a></td>
          <td width="155"><a href="index.php?page=sales"><img src="images/index_04.gif" width="155" height="23" border="0"></a></td>
          <td width="162"><a href="index.php?page=about"><img src="images/index_05.gif" width="162" height="23" border="0"></a></td>
          <td width="165"><a href="index.php?page=contact"><img src="images/index_06.gif" width="165" height="23" border="0"></a></td>
          <td width="146"><a href="index.php?page=admin"><img src="images/index_07.gif" width="146" height="23" border="0"></a></td>
          <td width="7"><img src="images/index_08.gif" width="7" height="23"></td>
</tr>
<tr>
<td height="17" colspan="7"><img src="images/index_09.gif" width="780" height="17"></td>
</tr>
<tr> 
<td colspan="7"><table width="780" height="100%" border="0" cellspacing="0" cellpadding="0">
</tr> 

<tr>
<td height="100%" background="images/index_16.gif" bgcolor="E6E8E8">
<div align="center">
<table width="724">
<tr> 
<td width="100%" height="261" valign="top">
<div align="center">
<p>home</p>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>

<tr> 
<td height="40"><img src="images/index_15.gif" width="780" height="40"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

the main problem that i see is you are defining the height of the cells by adding the height=23. since you are putting images in the <td> tags, just leave the img height and width to whatever the actual image height and width is.

like so...

Code:
<td width="7"><img src="images/index_02.gif"></td>

does this help?

- g
 
I think what is confusing here is that we are responding to 2 different threads where the originators were looking for something subtly (sp ?) different. The problem that I am claiming that cannot be solved with css only is the vertical and horizontal centering of a division.

The listapart article concedes (I think) that it cannot be done (cross browser) without the use of javascript.

Clive
 
ok, that one seemed to work although the computer that I am on only has ff & ie. If this works-cross browser I will give you a star or buy you a drink, whichever you prefer.

I am currently in a hotel at Biloxi Mississippi (US central time) waiting for my wife to return from her hospice start-up assignment.

I am done for the day. Here is a picture of my daughter with Britney Spears' husband at the Beau Rivage, Biloxi.

Have a nice evening!

Clive
 
Thanks for the replys guys,

Cool, like the pic Clive, wish i got to meet someone famous like your daughter has.

Im still working on the page size. Its very complicated unfortunatly.

If only i could get rid of those spaces between the navigation bar i would be ok. At the moment im only looking for a fix that works on IE, im not to bothered about other browsers yet. I just need to get this working.

I will carry on going, if anyone can help let me know

Thanks

Jim
 
Hey Jim,

In the 70's movie The Graduate, a famous line from Mr. Robinson to Ben was... "Plastics".

I would just like to say to you (in your situation), although I know that you will ignore me. "Frameset".

My wife is just pulling up and she will complain that I am just playing on the internet.

Have a nice evening!.

Clive
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top