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

Forums: Html, Css, Web Development, Table Height 100 Percent
Email this Topic • Print this Page

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: 236,486 • Replies: 20

No top replies

bump

0 Replies

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

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

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

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

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

Ya might wanna have a look at this:

http://www.sitepoint.com/forums/showthread.php?t=158987

0 Replies

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

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!

1 Reply

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

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

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

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

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

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

@Monger,

Remove the doctype line completely.

1 Reply

@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

@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

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.

1 Reply

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

Related Topics

Quick Links

My Account

able2know