100% Table Height Problems

joshcxa · #1 (**permalink**) Jul 3rd, 2005, 03:48

I am designing a website where the table is 100% in height and at the bottom of this table is a footer image.

But when i preview my results in a browser the footer is up just under the header. I'm confused because the table code I used from one site is not working for me this time.

Code: Select all

<BODY LEFTMARGIN=0 MARGINWIDTH=0">
<table width="800" border="0" cellspacing="0" cellpadding="0" align="center" height="100%">
  <tr>
    <td valign="top"></td>
  </tr>
  <tr>
    <td height="21" valign="middle" bgcolor="#FF0000"> 
    <div align="center" class="normtext"></div>    </td>
  </tr>
</table>
</BODY>

benbacardi · #2 (**permalink**) Jul 3rd, 2005, 10:34

what html doctype are you using? it wont work in XHTML, so if i ever need to make a table 100% high, i just usually remove the doctype.

ST · #3 (**permalink**) Aug 1st, 2005, 13:07

Is it wise to remove the doc type? Could it make compatibility problems or stuff?
Which is the doc type to us in that case?

jpmitchell · #4 (**permalink**) Aug 2nd, 2005, 04:03

I agree with ST, it is probably not a good idea to remove the doctype for several reasons: it will not validate, it really isnt good coding (or at least clean), and it probably isnt cross browser compatiable. Granted it works, but there is probably a different solution.

ST · #5 (**permalink**) Aug 2nd, 2005, 05:58

Here is a nice link where they explain the different doc types (not that I truly fully understand it …lol)

http://www.w3schools.com/tags/tag_doctype.asp

I use the following doc type to solve the problem of our friend joshcxa:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

*I’ve removed the second half because I noticed that it caused an horizontal scroll bar for no reason in that frame.

Do some one have the same problem¿

herkalees · #6 (**permalink**) Aug 3rd, 2005, 03:12

First off, I don't see any image in your code, so I'll just assume it's in that <div> in the second <td>.

Also, not all browsers handle height=100% the same way, whether it's valid code or not.

Are you trying to keep a footer at the bottom of the table, or at the bottom of the viewport?

If it's the former, you're code is fine, you just need to fill in some content in the top <td> and it will push the "footer" down.

I'm assume you're looking for the latter, which in that case I'd put the footer in it's own <div> below the </table> tag and before the </body> tag, then give it some CSS.

Of course, this is all wishy-washy depending on your browser and the quality of the code.

Added: Check this out for proper doctypes: http://webstandards.org/learn/templates/

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to constrain the height of a dynamic table	MrQuestions	Web Page Design	3	Mar 15th, 2008 00:08
Table height 100%	subhadip	Web Page Design	4	Sep 26th, 2007 14:15
How to make a table height equal to the browser height ?	subhadip	Starting Out	4	Sep 20th, 2007 07:56
Problems with height in a table-row element	llpamies	Web Page Design	3	Aug 9th, 2007 18:02
Table Height 100% only when refreshed….	mrunclesam	Web Page Design	9	Dec 22nd, 2006 15:05

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
100% Table Height Problems