style="height: 100%" -- Netscape/Mozilla/Opera vs. IE

**irbrian** · Aug 11, 2004, 11:51

This question has been asked dozens of times on this site, but not one thread seems to have a directly relevant answer, nor one that has helped me solve the problem.

It's the age old height = 100% problem.
HTML:
<td height="100%">
CSS:
<td style="height: 100%">

In IE my site renders perfectly -- the table fills the whole screen as expected. In Netscape/Opera, the table only grows as much as it is required to grow to contain the text therein. This causes issues for my page, which has a side menu that is supposed to span the height of the page.

Specifically, my page is formed of a table with 4 cells... a 120px by 24px top-left cell, a [remaining width] by 24px top-right cell, a 120px by [remaining height] bottom-left cell which will hold a variable length menu, and a [remaining width] by [remaining height] bottom-right cell which will hold the variable length content. Even if the variable-length content of both bottom cells is very short, the table should still expand vertically to fit document.

Once and for all, does anyone actually know the solution to this very common issue??

**Paul O'B** · Aug 11, 2004, 12:47

Hi,

This question has been asked dozens of times on this site, but not one thread seems to have a directly relevant answer

Have a look at the sticky faq thread on 100% height and you will see that mozilla requires the html and body elements to be 100% before it will render 100%.

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* commented backslash mac hack \*/ 
html, body{height:100%; padding:0;margin:0} 
/* end hack */ 
body {
height:100%;
padding:0;
margin:0
}
table {
height:100%;
width:100%;
border:1px solid #000;
}
td {border:1px solid red;vertical-align:top;}
td#toprow {height:24px;width:120px;}
 
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr > 
	<td id="toprow">1</td>
	<td>2</td>
</tr>
<tr> 
	<td>3</td>
	<td>4</td>
</tr>
</table>
</body>
</html>

Also note that ie needs to be in quirks mode or it won't work either. Thats about as far as my table knowledge goes

Paul

**irbrian** · Aug 11, 2004, 13:23

Actually, I tried that. I've got the DOCTYPE declaration for transitional, and I've got the html, body {height: 100%}. Still doesn't work.

Thanks for the reply anyway though.

**Paul O'B** · Aug 11, 2004, 13:30

Actually, I tried that. I've got the DOCTYPE declaration for transitional, and I've got the html, body {height: 100%}. Still doesn't work

Did you copy my code and try it out? It does exactly what you asked for in ie6, firefox and opera7

Show me your code as we could be guessing all night.

Paul

**irbrian** · Aug 12, 2004, 11:13

I found the problem. The table was nested inside a FORM, thus, the height of the table was set to 100% of the form element instead of the body element.

CSS specifies that a percent (%) height value causes the element to have a height value equal to the indicated % of the parent element. Since the FORM element has no height, the TABLE was being set to a height of 100% of [no height value], or 0 pixels -- and was naturally resized as content was added, rather than being set to 100% of the BODY element.

Internet Explorer must automatically assume that either the absolute height of the HTML or BODY element (I'm not sure which) is the pixel height of the whole document, and ignores any elements that cannot have a height value, like a FORM, in the height-inheritance hierarchy.

To me, Internet Explorer's method makes a lot more sense and is much easier to work with than the way CSS has specified it. I hope they consider changing that at some point.

To illustrate:

The first example below works in IE, Mozilla, and Opera as expected (note the lack of <style>html,body {height: 100%}</style>. The second example works in IE, but not in Opera -- the table is set to 100% of the height of the FORM, not the BODY. (For some reason the second example actually works in Firefox, which is odd since your own example, with the form tags added, behaves the same as Opera).

Example 1:

Code:

<html>
  <body>
	<table style="height: 100%; width: 100%; border-style: solid; border-color: black; border-width: 2px">
	  <tr>
		<td style="width: 20%; background-color: #d0d0f4">
		  1
		</td>
		<td style="width: 80%; background-color: white">
		  2
		</td>
	  </tr>
	</table>
  </body>
</html>

Example 2:

Code:

<html>
  <body>
	<form>
	<table style="height: 100%; width: 100%; border-style: solid; border-color: black; border-width: 2px">
	  <tr>
		<td style="width: 20%; background-color: #d0d0f4">
		  1
		</td>
		<td style="width: 80%; background-color: white">
		  2
		</td>
	  </tr>
	</table>
	</form>
  </body>
</html>

**Paul O'B** · Aug 12, 2004, 15:57

Originally Posted by irbrian

I found the problem. The table was nested inside a FORM,

That's funny - I didn't see a form in your first post, or your second post come to that

If you'd posted the correct code I would have pointed out your error straight away

Your examples above are not much use in working out the true rendering of css because you have invalid code (i.e. no doctype declaration). Therefore UA's will revert to quirks mode and use various means to support legacy and proprietary behaviour of elements.

This means you are very likely to get the wrong end of the stick as the browser is doing what it thinks best and not as it has been told.

In your above example you could simply have given your form a height of 100% and the examples would have worked in all three browsers.

Originally Posted by irbrian

note the lack of <style>html,body {height: 100%}</style>.

Well thats probably because the html element isn't the root element in quirks mode so it wouldn't be understood anyway.

If you add valid doctypes to your above examples then you will see that everything changes yet again.

Originally Posted by irbrian

CSS specifies that a percent (%) height value causes the element to have a height value equal to the indicated % of the parent element.

Only when the parent has an explicit height. If the parents height is dependent on content (or percentage values) then any percentage values of the child will revert to auto (except when the parent is the html,body element).

As you see 100% height isn't best implemented in CSS as you can't specify 100% of something that is already itself specified as 100% of something else. Which is a great shame because it would make life a lot easier

Of course there are exceptions and it seems that tables can inherit the 100% from more than one nesting down. And ie will also inherit 100% from its parent on elements other than tables as well.

So you see - its as clear as mud

In order to have answered your first question I would have needed to know all the above which is why your first snippet of code really wasn't much use at all lol.

Anyway - have fun

Paul

**michaelcaplan** · Sep 13, 2004, 09:17

interesting thread. Any idea how I can apply the same principals to nested tables?

Eg (http://mompop.mine.nu/azur/en/): I am trying to force the following left navigation bar (which is a seperate nested table made up of three cells: 1 - Links, 2 - empty cell height 100%, 3: contact details) to expand the length of the right three cells.

Thanks,

Michael

**Paul O'B** · Sep 13, 2004, 13:12

Hi Michael,

I tried to access your page but it wouldn't load. I'll try again later and see id its been fixed

Paul

**michaelcaplan** · Sep 13, 2004, 13:29

sorry about that. the URL shoudl be http://mompop.mine.nu:8080/azur/en/ But, you shoudl know that the page is a work in progress. I am currently reworking the protion of code in question taking a CSS aproach (ditching the nested table). Still, no luck.

Thaks,

Michael

**Paul O'B** · Sep 13, 2004, 13:49

Still, no luck

If you are looking for some css examples then theres an FAQ sticky thread that explains the ins and outs of 100% height and when and where it works or doesn't.

The 3 col demo sticky thread shows some examples also.

The easiest technique for equal columns and 100% height is to use repeating bg images but of cours it does depend on circumstance.

As you're in the middle of changing your code I'll wait until you've finished (or until you run into problems

)

I'm not keen on wading through tables anyway

Paul

The SitePoint Forums have moved.

User Tag List

Thread: style="height: 100%" -- Netscape/Mozilla/Opera vs. IE

Thread Tools

Display

style="height: 100%" -- Netscape/Mozilla/Opera vs. IE

Bookmarks

Bookmarks

Posting Permissions