IE6 100% height filling past page

**Mistrel** · 12-24-2006, 06:27 PM

I want the last table to expand to the edge of the browser for my footerbut unlike other browsers IE thinks 100% means the height of the entire browser window and not the remainder of the page.

Is there a work-around for this?

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
<!--
html, body {
	margin:0;
	padding:0;
	border:0;
	height:100%;
}
-->
</style>
</head>
<body>

<div align="center" style="width:100%; height:100%">
<table style="height:55px" width="788" border="2" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="20">&nbsp;</td>
  </tr>
</table>

<table style="height:55px" width="788" border="2" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="20">&nbsp;</td>
  </tr>
</table>

<table style="height:55px" width="788" border="2" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="20">&nbsp;</td>
  </tr>
</table>

<table style="height:100%" width="788" border="2" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20">&nbsp;</td>
    <td>&nbsp;</td>
	<td>&nbsp;</td>
    <td width="20">&nbsp;</td>
  </tr>
</table>

</div>

</body>
</html>

**mwinter** · 12-24-2006, 07:59 PM

Originally Posted by Mistrel

I want the last table to expand to the edge of the browser for my footer

Not going to happen.

but unlike other browsers IE thinks 100% means the height of the entire browser window and not the remainder of the page.

What other browsers are these? Certainly not correct ones, like Firefox and Opera. MSIE is correct, though other aspects of the height property are implemented incorrectly.

The computed height of a percentage height is that proportion of the computed height of the containing block - if, and only if, the height of the containing block does not depend upon the content height. In this instance, the containing block is the div element parent that, as an ancestor of the body and html elements, has the height of the viewport. Therefore, the table will have that same computed height.

Is there a work-around for this?

A workaround for correct behaviour?

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Serving XHTML as HTML is pointless. Serving Transitional XHTML is surely a joke.

You definitely don't want to be doing that with XHTML.

A table-based layout?!

Mike

**Mistrel** · 12-24-2006, 08:10 PM

I would appreciate more constructive criticism. Instead of bombarding me with what I'm doing wrong why don't you educate me on how to create this layout properly?

**mwinter** · 12-24-2006, 08:52 PM

Originally Posted by Mistrel

Instead of bombarding me with what I'm doing wrong why don't you educate me on how to create this layout properly?

Assuming you expect the lower element to scroll (given sufficient content), it's possible with fixed positioning, but it wastes an awful lot of space. On that basis, the answer is: You don't.

Mike

**Mistrel** · 12-25-2006, 12:00 AM

Sure you can! What about this?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Website Title</title>

<style type="text/css">
html, body {
	font-family: Tahoma, Arial, sans-serif;
	font-size: 11px;
	margin:0;
	padding:0;
	border:0;
	height:100%;
}
</style>

</head>
<body>

<div align="center" style="height:100%">
<table width="788" border="2" cellspacing="0" cellpadding="0" style="height:100%">
  <tr>
    <td width="20" rowspan="2">lshadow</td>
    <td valign="top" style="background:#999">
	<div style="height:55px; background:#000; color:#fff">logo</div>
	<div style="height:28px; background:#333; color:#fff">nav</div>
	<div style="height:161px; background:#666">header</div>
	<div style="height:auto; background:#999">content</div>	</td>
    <td width="20" rowspan="2">rshadow</td>
  </tr>
  <tr>
    <td valign="bottom" height="40"><div style="height:40px; background:#CCC">footer</div></td>
    </tr>
</table>
</div>

</body>
</html>

**mwinter** · 12-25-2006, 11:43 AM

Originally Posted by Mistrel

Sure you can!

What exactly are you trying to contradict? I haven't stated that you can't do anything. I have recommended that you don't do something.

What about this?

Invalid and abuses table elements. Two things I would never recommend.

Mike

Thread: IE6 100% height filling past page

Thread Tools

Search Thread

IE6 100% height filling past page

Bookmarks

Bookmarks

Posting Permissions