The Dreaded 100% Height Question!!!

Great Elephant · #1 (**permalink**) 05-13-2008, 09:13 AM

Right now I'm playing around with html/css to try and find problems that might hider what I envious design-wise for my website

This is my problem and from the Google searches I've made it seems pretty prevalent

I want to be able to use percentage based table alignment to make sure that images, for example, stay centered no matter how the browser window is set. But there seems to be a problem with IE and Firefox the table won't stretch down to the bottom of the page

I'm sure some of you have had this problem what am I doing wrong? Is there a solution?

Heres the simple code below

Quote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table width="100%" height="100%" border="1">
<tr>
<td> </td>
</tr>
</table>
</body>
</html>

drjerm · #2 (**permalink**) 05-13-2008, 10:33 AM

Use CSS. I have added centering of text too:

Quote:

<html>

<head>
<title>100% Table Height</title>
</head>

<body>

<table style="width:100%;height:100%;text-align:center;">

<tr>

<td>This is stuff in cell1</td>
<td>This is stuff in cell2</td>

</tr>

</table>

</body>

</html>

lisa · #3 (**permalink**) 05-13-2008, 10:42 AM

Hi drjerm,

In the future can you please just summarize the content here rather than posting a link to your site. I realize you were answering the question but it opens the door for everyone to begin linking to their site for relevant questions. Thanks for understanding.

drjerm · #4 (**permalink**) 05-13-2008, 11:23 AM

My apologies Lisa, I had no idea that was a boo boo, I appreciate you letting me know. I have since updated my reply to include just the code.

lisa · #5 (**permalink**) 05-13-2008, 11:30 AM

No problem at all. I knew no harm was intended. I appreciate you updating your post.

Great Elephant · #6 (**permalink**) 05-13-2008, 12:53 PM

Thanks drjerm,

I tried your code and I still had the same problem. For some reason I can't seem to get the height to cover 100% of the windows browsers size.

I'd provide you with a screen shot to sorta give you a picture of what I'm talking about but I don't want to break the forum rules. So i think I'll go ahead and continue working on it and I'll review my CSS

Thanks for the help

lisa · #7 (**permalink**) 05-13-2008, 02:37 PM

Great Elephant, screenshots are OK.

Great Elephant · #8 (**permalink**) 05-13-2008, 04:05 PM

Quote:

Originally Posted by lisa

Great Elephant, screenshots are OK.

oh great! alright well here goes nothing

This is what I get no matter if i use CSS or HTML in both IE and Firefox. As you see the height is not extending to 100% of the browser. Ideally I'd use no border but I have it showing just to make it clear that for some reason its not working

Its driving me nuts but I think I might have to deal with it until i learn to understand CSS a bit better.

If the pic is too small I can make it bigger

DotComBot · #9 (**permalink**) 05-13-2008, 05:48 PM

Hey GE,

Try this:

Code:

<table style="width:100%";"height:100%";"text-align:center;">

I think that will work right off the top of my head. If I remember correctly your quotation marks are placed precisely to work with tables.

Then again, I may be wrong...

DotComBot · #10 (**permalink**) 05-13-2008, 06:16 PM

Nevermind, that didn't work.

I created a page with drjerm's code and it seemed to work fine. What is it doing when you use it?

WB Sponsors