1
   

Making a table row fill 100% of remaining height (CSS in IE)

 
 
Monger
 
Reply Mon 22 Nov, 2004 01:06 pm
First off, here's a thread along similar lines which Craven de Kere helped me out with earlier: <table height=100%> doesn't work when using html4.01 doctype declaration

Here's my follow up...
I've actually got a fairly complex (I hate it) table layout, but here's some stripped down code which produces the same results...
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css"><!--

html,body,table#pagelayout {
height:100%;
width:90%;
margin:auto;
}

// -->
</style>
</head>
<body>


<table id="pagelayout" border="2">
<tr style="height:90px;">
<td> </td>
</tr>
<tr style="height:100%;">
<td> </td>
</tr>
<tr style="height:90px;">
<td> </td>
</tr>
</table>


</body>
</html>


What I imagine that 3-row table should do is have a 90 pixel header & footer & have the middle row fill 100% of the remaining vertical space.

That's exactly what happens in Firefox 1.0 & Opera 7.54, but in IE the middle row fills 100% of the IE window's height, and another 90px are added to the rows above & below (which adds scrollbars I don't want).

Other things I've tried include applying the height to the cells instead of rows (td instead of tr) & using "height: auto;" for the middle row (which, though I was hoping otherwise, I imagine lets the browser assign a height to it -- which I don't want since it gets it wrong).

Any ideas on how to get a row to fill 100% of remaining space after other row heights have been allocated (as it works using html without css & an html4.01 doctype)? Thanx...
  • Topic Stats
  • Top Replies
  • Link to this Topic
Type: Discussion • Score: 1 • Views: 231,802 • Replies: 20
No top replies

 
Monger
 
  1  
Reply Wed 24 Nov, 2004 08:57 am
bump
Smile
0 Replies
 
Craven de Kere
 
  1  
Reply Wed 24 Nov, 2004 02:45 pm
As far as I know what you are trying to do is not possible without ugly hacks.

I don't have the time to verify and explain right now but am pretty sure IE won't do what you want.

And it's not because of the 100% TD, Firefox is not rendering it correctly because of that (if you remove it it will still render correctly.

The problem is the way IE handles tables with some fixed cells and unfixed cells.

That's why designers use stretching spacers.

In this case, I don't think there's any way to get TD height to respect viewport.

I'll try to look at this later and see what I can come up with.
0 Replies
 
Monger
 
  1  
Reply Wed 24 Nov, 2004 03:01 pm
Thanks dude, but that's alright...I know you're busy & I'll look into it more myself.

I could do some sort of javascript hack based on the screen resolution or some such, but that would never work with pixel precision across all browsers.

Thing is, although many people use spacers to keep cells at least at a certain size, td height="100%" or width="100%" in HTML did indeed mean fill remaining table space (or at least was commonly understood to mean that). E.g. the following should work fine across all browsers:

Code:<html>
<body>

<table height="100%" width="100%" border=2>
<tr>
<td height=90><img src="spacer.gif" width=1 height=90></td>
</tr>
<tr>
<td height="100%"> </td>
</tr>
<tr>
<td height=90><img src="spacer.gif" width=1 height=90></td>
</tr>
</table>

</body>
</html>


Only problem is that the table height attribute has been depricated in HTML 4.01 as you've shown me...
0 Replies
 
Monger
 
  1  
Reply Wed 24 Nov, 2004 09:02 pm
I meant for that code to include spacers (I've edited them in)....




I've been working on it though & along with some code I found online I've gotten a solution...

It's not perfect -- the middle row only appears to fill the screen, but it does look pretty & I'm using div's instead of tr's which is nice too.

Works well in IE & Firefox. In Opera it works acceptably for me -- the footer div is shown below the viewport, but that doesn't bother me as I don't really care about Opera & I'll only have copyright info in the footer anyway. Check it...

Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html, body, #container {
min-height: 100%; /* Not supported by IE 5/6, but required for Firefox/Opera */
width: 100%;
height: 100%;
}
/***************************************************************************
* The "height" above is a hack for IE5+/Win. Below it's adjusted using
* the child selector to hide from IE5+/Win.
* Without this, Moz1.0 adds a vertical scrollbar, & Firefox1.0/Opera7.54
* cover everything with the footer when the viewport gets too small.
***************************************************************************/
html>body, html>body #container {
height: auto;
}
body {
margin: 0;
}
#container {
position: absolute;
top: 0;
left: 0;
background-color: #cfc;
}
#main {
margin-bottom: 150px;
height: auto;
}
#header {
width: 100%;
height: 150px;
border-bottom: 1px solid black;
background-color: #fcc;
}
#tab {
width: 100%;
overflow: auto;
}
#footer {
position: absolute;
bottom: 0;
border-top: 1px solid black;
width: 100%;
height: 150px;
background-color: #ccf;
}
</style>
</head>

<body>
<div id="container">
<div id="main">
<div id="header">Top</div>
<div id="tab">Middle</div>
</div>
<div id="footer">Bottom</div>
</div>
</body>
</html>
0 Replies
 
Monger
 
  1  
Reply Sat 11 Dec, 2004 12:29 am
Actually, even that sucks... the fact that it only looks like it fills screen height (though it puts on a great disguise) means that I can't do some things I wanna do if I use that code (e.g. have an image that runs down the full length of the border on both sides of my centered, 780px wide layout).

I've resorted to removing my doctype declaration so I can use my deprecated td height=100% tag.

I'll deal.
Bah humbug.
0 Replies
 
Mr Stillwater
 
  1  
Reply Sat 11 Dec, 2004 02:41 am
Yep.











I have NO friggin' idea about what you two are on about.

Craven, have those hamsters gotten into line after my little chat with the pictures of the blender?
0 Replies
 
guest
 
  1  
Reply Fri 4 Mar, 2005 09:59 pm
Ya might wanna have a look at this:

http://www.sitepoint.com/forums/showthread.php?t=158987
0 Replies
 
nobug
 
  1  
Reply Wed 11 May, 2005 03:49 pm
I've searched alot for this issue. I have this problem for long time ago. So far I haven't found a solution, but...
You gave me an brilliant idea:

Monger wrote:
I've resorted to removing my doctype declaration so I can use my deprecated td height=100% tag.


Since in HTML 4.01 the height attribute of the table tag is deprecated... why not just comply with an older version of the HTML where this attribute wasn't deprecated?

I just replaced my
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
with
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
et voila
the things are back to normal... Like in the good old 90's

Hope this helps
0 Replies
 
raspberryh
 
  1  
Reply Mon 4 Sep, 2006 03:31 pm
Quote:
I just replaced my
<DOCTYPE>
with
<DOCTYPE>
et voila
the things are back to normal... Like in the good old 90's

holy crap!!! that really worked! i can't believe it! every time i make a freaking website i have to jump through hoops to get my freaking table cell heights to look okay in IE. wow, thanks so much!
but you know, it makes me wonder... WHY?!?! why would they get rid of such a useful thing? i don't understand Sad table cell heights are awesome Sad
anyways, thanks so much, this really helped a TON!
N66FC Raptor
 
  1  
Reply Sat 23 Sep, 2006 04:42 am
HTML 3.2 surprized me as well, here's a solution that validates XHTML with 100% width and 100% height table, AND, adds the latest version of Adobe Flash Player! Get "Flash Player Kit" from adobe.com to see original "Express Install Example" code. To see the following code in action .. click here

Code:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">

<head>
<title>Express Install Example</title>
<meta http-equiv="Content-Type" content="application/x-shockwave-flash; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
<!--
html, body, table {
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
}
td {
height: 100%;
vertical-align: top;
}
#wrapper {
margin: 0 auto;
text-align: left;
width: 100%;
}
//-->
</style>
<!-- Get 'Flash Detection Kit' from http://www.adobe.com/products/flashplayer/download/detection_kit/ -->
<script type="text/javascript">
<!-- Globals -->
<!-- Major version of Flash required -->
var requiredMajorVersion = 8;
<!-- Minor version of Flash required -->
var requiredMinorVersion = 0;
<!-- Minor version of Flash required -->
var requiredRevision = 0;
</script>
<!-- Get 'Flash Detection Kit' from http://www.adobe.com/products/flashplayer/download/detection_kit/ -->
<script type="text/javascript" src="AC_OETags.js"></script>
</head>

<body>
<!-- Place large border to display 100% width and 100% height table, validates! -->
<table id="wrapper" width="100%" cellspacing="0" cellpadding="0" border="15">
<tr>
<td valign="top">
<script type="text/javascript">
<!--
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);

// Version check based upon the values defined in globals
var hasReqestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);


// Check to see if a player with Flash Product Install is available and the version does not meet the requirements for playback
if ( hasProductInstall && !hasReqestedVersion ) {
// MMdoctitle is the stored document.title value used by the installation process to close the window that started the process
// This is necessary in order to close browser windows that are still utilizing the older version of the player after installation has completed
// DO NOT MODIFY THE FOLLOWING FOUR LINES
// Location visited after installation is complete if installation is required
var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
var MMredirectURL = window.location;
document.title = document.title.slice(0, 47) + " - Flash Player Installation";
var MMdoctitle = document.title;

AC_FL_RunContent(
"src", "playerProductInstall",
"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
"width", "550",
"height", "300",
"align", "middle",
"id", "detectionExample",
"quality", "high",
"bgcolor", "#3A6EA5",
"name", "detectionExample",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
);
} else if (hasReqestedVersion) {
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
"src", "example",
"width", "550",
"height", "200",
"align", "middle",
"id", "detectionExample",
"quality", "high",
"bgcolor", "#FFFFFF",
"name", "detectionExample",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
'codebase', 'http://download.adobe.com/get/flashplayer/current/swflash.cab',
"pluginspage", "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
);
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'Alternate HTML content should be placed here.<BR>'
+ 'This content requires the Adobe Flash Player. '
+ '<a href=http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash>Get Flash</a>';
document.write(alternateContent); // insert non-flash content
}
// -->
</script>
<noscript>
<p>Provide alternate content for browsers that do not support scripting or for
those that have scripting disabled. Alternate HTML content should be placed
here. This content requires the Adobe Flash Player and a browser with JavaScript
enabled. <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
>Get Flash</a></p>
</noscript>
</td>
</tr>
</table>
</body>

</html>

0 Replies
 
gimzani
 
  1  
Reply Wed 31 Jan, 2007 11:14 am
Table Height 100%
Okay you'll LOVE this one!

I see that you chose an old page render in your DOCTYPE tag - that's good! I didn't see that one before, but if you are concerned that your page may not render correctly or if you have other bugs and want to TRY my fix, just paste this ABOVE the DOCTYP tag.

<table>
<tr>
<td></td>
</tr>
</table>

It creates a 1 pixel black table above your page, but the height attribute works again.

The W3C needs to stop smoking all of that CRACK and put the TABLE HEIGHT 100% BACK in the code!

Happy coding!
0 Replies
 
gimzani
 
  1  
Reply Wed 31 Jan, 2007 11:14 am
Table Height 100%
Okay you'll LOVE this one!

I see that you chose an old page render in your DOCTYPE tag - that's good! I didn't see that one before, but if you are concerned that your page may not render correctly or if you have other bugs and want to TRY my fix, just paste this ABOVE the DOCTYP tag.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#000000" height="1"></td>
</tr>
</table>

It creates a 1 pixel black table above your page, but the height attribute works again.

The W3C needs to stop smoking all of that CRACK and put the TABLE HEIGHT 100% BACK in the code!

Happy coding!
0 Replies
 
Monger
 
  1  
Reply Fri 9 Feb, 2007 02:35 am
gimzani, all you're really doing is kicking the page renderer into quirks mode. By putting code above the doctype, the doctype becomes invalid and it's generally the same as not having one to begin with.

There are ways to pull this kind of stuff off with pure CSS, even in IE6. I would no longer consider using anything other than an XHTML doctype in any personal pages. The trade-off isn't worth it, by a long shot.
0 Replies
 
allegra
 
  1  
Reply Sat 16 Jun, 2007 11:14 pm
td height
I am trying to make a td (or tr, I don't care which, I've tried both) restricted to a certain height, and I tried it with both css and the height attribute in html and it works fine in firefox 2.0 but not in IE 7.0!! Can anyone help? I hate IE! IE insists on making the cell much larger than that. The thing is I have two rows in the table, and IE tries to make them equal heights. I want one to be a certain height and the other to be the remaining height of the table. The link is here: EDIT: MODERATOR: ASK ALL THE QUESTIONS YOU WANT, BUT DON'T POST YOUR LINKS HERE

Thanks!
0 Replies
 
Gavannon
 
  1  
Reply Wed 28 Nov, 2007 08:38 pm
Maybe this works?
I think I know what allegra was trying to do, and it's always been a huge pain in my ass!

I actually managed to do it a while back using xhtml transitional, and it works in IE and Firefox.

Check out: EDIT: MODERATOR: ASK ALL THE QUESTIONS YOU WANT, BUT DON'T POST YOUR LINKS HERE

The width and height are always at least 100% of the screen, with a nice copyright footer.

(Sorry for the crappy code - the client wanted the entire website to adjust based on the user's screen resolution!)
0 Replies
 
tones411
 
  1  
Reply Tue 29 Sep, 2009 03:34 pm
@Monger,
Remove the doctype line completely.
chosenscripts
 
  1  
Reply Thu 26 Nov, 2009 05:31 pm
@raspberryh,
I LOVE YOU!!!!!!!!!!! Thanks so much for that, I spent hours trying to get that figured out... omg I am so happy right now.... I love that feeling of relief!
0 Replies
 
chosenscripts
 
  1  
Reply Thu 26 Nov, 2009 05:34 pm
@tones411,
You could do that, but the doctype can be an important part in css based websites. I have to use it or my site will have a different look in each browser... which wouldent really help me any because I sell the scripts I make and that would not look like a quality website....
0 Replies
 
CJ Dennis
 
  2  
Reply Wed 20 Oct, 2010 11:48 pm
If you don't want to resort to HTML 3.2 you can use use the following doctype instead:

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

It will also use quirks mode in Internet Explorer, Firefox, Opera, etc. Check out the excellent Quirks Mode website for details! Make sure you don't add anything to it or it won't give you quirks mode in all browsers. It's possible to have completely valid HTML code with CSS using this method.
 

Related Topics

 
  1. Forums
  2. » Making a table row fill 100% of remaining height (CSS in IE)
Copyright © 2019 MadLab, LLC :: Terms of Service :: Privacy Policy :: Page generated in 0.03 seconds on 10/15/2019 at 03:00:27