1. Home
  2. Forums Index
  3. Browser Side / CSS 9:16 pm May 21, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

CSS table height not working

css table height

         

fjohnson

2:40 pm on Oct 13, 2008 (gmt 0)

10+ Year Member



Hi,
I have a table that I need to be 100% height (I know if it is not a valid property, but it cvan be made to work), and it worked fine on an old page that just had <html>, but since I have added a CSS menu, I added

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

to declare the Doctype.

Any idea how I can get my 100% height to work with this? I have tried <table id="fullheight"> with #fullheight{height:100%} and the straight up <table height="100%">

Thanks,
Fiona

fjohnson

5:18 pm on Oct 13, 2008 (gmt 0)

10+ Year Member



OK, I have been pulling my hair out now. I have searched the web and tried a bunch of things I found, but nothing has worked! Here is a shell of my HTML page. I am trying to make the left column (specifically the background image) continue to 100% height for that nav section. I know beyond HTML 3 it does not work. If I get rid of my Doctype it works, but I need that for other content. Please help!

Thanks!

-----------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1">
<tr>
<td width="20%" valign="top">
<table border="0" width="100%" cellspacing="0" cellpadding="0" id="table2" background="/images/leftbakpap.gif">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td height="22">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>
<td width="80%">content<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
&nbsp;</td>
</tr>
</table>
</body>
</html>
-----------------------------------------------------------------------

ollyno1uk

8:06 pm on Oct 13, 2008 (gmt 0)

10+ Year Member



how about

<td width="20%" valign="top">

to

<td width="20%" height="100%" valign="top">

swa66

8:17 pm on Oct 13, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Can't say I recently played with tables for layout, but:

"height: 100%" in css means to use the height of the direct parent if it was set explicitly.

[w3.org...] :

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.

Bottom line: also give html 100% height 


html, body {
  height: 100%;
}

Not all browsers might react to it all the same way, take extra care.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 9:16 pm May 21, 2026