div height 100% inside td in IE

**thangaman** · 11-12-2009, 07:36 AM

Hi,
I have requirement for div inside the td should contain the 100% height.
Pls find the code below:
-----
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML</title>
<style type="text/css">
/* body{height:100%} - should not be used */
tr,td,table,div {height:100%;min-height:100%}
</style>
</head>
<body>
<table border="1" style="" cellspacing="0" cellpadding="0">
<tr>
<td>
Test 1<br/>
Test 2
Test 2Test 2
Test 2<br/>
Test 2<br/>
Test 2<br/>
Test 2<br/>
Test 2<br/>
Test 2<br/>
</td>
<td style="">
<div style=" background-color:#ff0000;border:1px solid #666">
Test 1
</div>
</td>
</tr>
</table>
</body>
</html>
-----
The above code satisfies the requirement in firefox 3+.
But gracefully fails in IE(6,7,8).
Kindly help me to find the solution for this requirement.

Thanks in advance
Thangaman

**jscheuer1** · 11-12-2009, 09:53 AM

100% height has never been a very clearcut style unless there is a parent element with a more substantially defined height, give this a shot:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table {
 height: 8.5em;
}
td {
 height: 100%;
}
td div {
 height: 100%;
 background-color: #f00;
 border: 1px solid #666;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
Test 1<br>
Test 2
Test 2Test 2
Test 2<br>
Test 2<br>
Test 2<br>
Test 2<br>
Test 2<br>
Test 2<br>
</td>
<td>
<div>
Test 1
</div>
</td>
</tr>
</table>
</body>
</html>

That said, you have discovered a rendering bug in one or the other browser. I'm really not sure which. Opera also shows it like IE, Chrome shows it like Firefox. Both Opera and Chrome each have different rendering engines than any of the others.

Also, just for comparison, set the table to 100% height and remove the DOCTYPE.

**thangaman** · 11-12-2009, 11:11 AM

Dear John,

Thank you for ur response with one of the possible solution.

But in my case td content can increase @ any point of time because td contains dynamic content, so I can't keep height:#em or #px. So it does not resolving my issue.
And doctype is must as loose.dtd.

Kindly suggest me if you come with possible solution to opt for dynamic content.

Thank you!
Thangaman

**jscheuer1** · 11-12-2009, 11:37 AM

Well, I'm assuming then that the dynamic content is imported via some type of javascript, perhaps including AJAX. In any case, if javascript is involved, at least in IE, one may set the table's style.height property to its offsetHeight property + 'px'. In limited tests here, this works for IE, but not for Opera. In Opera one must iterate over all elements involved that have 100% height and set each of them to their respective offsetHeight + 'px'.

Unfortunately, any method for doing so would either have to be applied to all browsers, or rely upon some sort of browser sniffing, or possibly rely upon a test or tests (assuming the layout is similar) of the the division's offsetHeight as compared to the preceding td's offsetHeight. None of these is really ideal. The first is unnecessary, the second may cause problems in the future, and the third might not work, or might become complex to execute, though if it does work out is the preferred method.

Using the second method (browser sniffing), I came up with this code which solves your original example, but that would need to be adapted to what you are now talking about:

Code:

<script type="text/javascript">
if(window.attachEvent){
	window.attachEvent('onload', function(){
		var els = document.all || document.getElementsByTagName('*'), l = els.length, i = 0;
		for(i; i < l; ++i){
			if((window.opera || els[i].parentNode === document.body) && els[i].currentStyle && els[i].currentStyle.height === '100%'){
				els[i].style.height = els[i].offsetHeight + 'px';
			}
		}
	});
}
</script>

If I were to help you adapt it to your actual situation though, I'd want to see the code, preferably the page itself live:

Please post a link to the page on your site that contains the problematic code so we can check it out.

That said, the function itself:

Code:

function percentHeight(){
	var els = document.all || document.getElementsByTagName('*'), l = els.length, i = 0;
	for(i; i < l; ++i){
		if((window.opera || els[i].parentNode === document.body) && els[i].currentStyle && els[i].currentStyle.height === '100%'){
			els[i].style.height = els[i].offsetHeight + 'px';
		}
	}
}

could be run each time content is imported (after it arrives and is inserted into the document), perhaps with good result. Except that the condition els[i].currentStyle.height === '100%' would no longer be true after the first run, unless the javascript style.height were peremptorily removed each time and all heights were set in the stylesheet.

**jscheuer1** · 11-12-2009, 11:42 AM

After all that, I hit upon another idea:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table {
 height: 100%;
}
td {
 height: 100%;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
Test 1<br>
Test 2
Test 2Test 2
Test 2<br>
Test 2<br>
Test 2<br>
Test 2<br>
Test 2<br>
Test 2<br>
</td>
<td style="background:red;vertical-align:top;border:2px solid #666">
Test 1
</td>
</tr>
</table>
</body>
</html>

**thangaman** · 11-12-2009, 02:51 PM

Thank you John for all your inputs to resolve the IE css issue for Div height(100%).

But, I'm sorry, I shouldn't use script or expression.
Need to achieve by css.

I'm working locally, so I'm unable to put url.

There is a requirement div should be inside td.
Within that div there are another html element comes or content (kind of template). I can't remove div inside td.

Still looking for the better solution.

Thanks
thangaman

**jscheuer1** · 11-12-2009, 03:08 PM

Well, I would think that of course one could remove the division, though depending upon what all you are using, it may be a bit tricky to do so, nevertheless, it can be done. Anything that can be ascribed to it can be ascribed to the td.

However, it may remain - the result will still appear as desired, the same as in my most recent demo:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table {
 height: 100%;
}
td {
 height: 100%;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
Test 1<br>
Test 2
Test 2Test 2
Test 2<br>
Test 2<br>
Test 2<br>
Test 2<br>
Test 2<br>
Test 2<br>
</td>
<td style="background:red;vertical-align:top;border:2px solid #666">
<div>
Test 1
</div>
</td>
</tr>
</table>
</body>
</html>

**thangaman** · 11-12-2009, 03:56 PM

Dear John,

Thank you for your quick reply.
Yes, output for one scenario you have achieved. thats good.

If you see the div height, it's only 15% of height of td, and contain text.
It does not grow upto 100% of td(height).

Expected output will be div should expand(height) according to td height.

Thanks
thangaman

**jscheuer1** · 11-12-2009, 04:23 PM

What's the difference, as long as it looks as desired?

**thangaman** · 11-12-2009, 04:54 PM

There are lot of thinks behind div height grow according to td height.
Top,bottom, middle images, contents etc... with different sizes and bg comes which needs div with 100% height.
Thank you!