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!

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

table set to 100% height won't work

Status
Not open for further replies.
fiuPikeOY

fiuPikeOY

Programmer
Jun 14, 2004
143
US
Hello,

I have a page that has a 1-cell table set to 100%width by 100% height. Inside that I have something that needs to be in the absolute center of the page(another table with text and stuff). but the first table is not expanding to 100% height so the inner table shows up all the way to the top. What can the problem be? Below is my code. The page doesn't have much yet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>RL Williams</title>
<link href="styles/generalStyles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"><table width="760" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20"><img src="pics/tableBG_r2_c2.gif" width="20" height="20" /></td>
<td background="pics/tableBG_r2_c4.gif">&nbsp;</td>
<td width="20"><img src="pics/tableBG_r2_c6.gif" width="20" height="20" /></td>
</tr>
<tr>
<td background="pics/tableBG_r4_c2.gif">&nbsp;</td>
<td>&nbsp;</td>
<td background="pics/tableBG_r5_c6.gif">&nbsp;</td>
</tr>
<tr>
<td><img src="pics/tableBG_r8_c2.gif" width="20" height="20" /></td>
<td background="pics/tableBG_r8_c4.gif">&nbsp;</td>
<td><img src="pics/tableBG_r8_c6.gif" width="20" height="20" /></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
 
Sort by date Sort by votes
table height set to 100% isn't valid html.

Try using a spacer image.

[cheers]
Cheers!
Laura
 
Upvote 0 Downvote
why not, I'm setting it right from dreamweaver MX. A spacer graphic would be good too but if I set the spacer to 100% height, it would take the size of the cell where it is, correct?

thanks
 
Upvote 0 Downvote
While you can set the height property in DWMX, it doesn't mean it's W3C valid, nor does it mean that all browsers will render it the way you intend.


It's also impossible to have a 100% height in a table, as the height is dependent on the content. The best you can do is anticipate the most-used resolution of the end-users, and set the spacer image to that height. So if you think the majority of your users will use a 1024x768, then set the spacer image to be that height.

In that case, I recommend you create a container table, which has the spacer image, and then put your body table inside, like so:
Code: 
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/spacer.gif" width="1" height="768"></td>
	<td width="100%"><table width="760" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="20"><img src="pics/tableBG_r2_c2.gif" width="20" height="20" /></td>
        <td background="pics/tableBG_r2_c4.gif">&nbsp;</td>
        <td width="20"><img src="pics/tableBG_r2_c6.gif" width="20" height="20" /></td>
      </tr>
      <tr>
        <td background="pics/tableBG_r4_c2.gif">&nbsp;</td>
        <td>&nbsp;</td>
        <td background="pics/tableBG_r5_c6.gif">&nbsp;</td>
      </tr>
      <tr>
        <td><img src="pics/tableBG_r8_c2.gif" width="20" height="20" /></td>
        <td background="pics/tableBG_r8_c4.gif">&nbsp;</td>
        <td><img src="pics/tableBG_r8_c6.gif" width="20" height="20" /></td>
      </tr>
    </table></td>
  </tr>
</table>

Hope this helps!


[cheers]
Cheers!
Laura
 
Upvote 0 Downvote
To find the absolute size of the viewable area of the browser, you'll need to resort to something like javascript that can actually detect what the browser is doing. As Laura points out, height=100% is not valid HTML code.



There's always a better way. The fun is trying to find it!
 
Upvote 0 Downvote
Here's something that works for IE6+... I can't recall the ways in which Opera, Firefox, Safari, etc will differ in their handling of the availWidth property... or if it's even a valid property.
Code: 
<html>
<head>
<style type="text/css">
img.maxHeight {
  float:left;
  width: 12px;
  height: expression(screen.availHeight - 150);
  border: 2px solid #660000; // just so you can see the sample
}
body {
  margin: 4px;
}
</style>
</head>
<body>
<img src="spacer.gif" class="maxHeight" />
<div id="mycontent">
whole buncha stuff
</div>
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
232
lmcate
lmcate
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
767
bdwilcox
bdwilcox
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
822
pmonett
pmonett
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
1K
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top