Page 1 of 1

Stretching a div to the full height of a table

Posted: Tue Dec 20, 2005 7:39 pm
by josh
I need to put a div inside a table cell and have it take up the entire height of the cell, it is either this or an all-table layout. I've been googling for a long time because I don't wan't to resort to an all-table site, any takers?

Code: Select all

<table width="100" height="250" border="0" align="center" cellpadding="0" cellspacing="0">
	<tr>
		<td valign="top" height="100%">
			<div style="position:relative; background-color:#CCCCCC; min-height:100%">
			content, this div needs stretch to the entire height of the table
			</div>
		</td>
	</tr>
</table>

----
please note I don't just want the div to be 250px tall, If I add content in another column of the table that is more then 250px, I need the div layer to stretch with the table

Posted: Tue Dec 20, 2005 8:15 pm
by Chris Corbyn
That should work in FF but not in IE since IE doesn't support min-height/width. However, conveniently another IE inconsitency in the box model helps to work around the issue. IE will stretch/resize a <div> if it's contents are too large so min-height is just the same as height in IE, to all intents and purposes.

Code: Select all

<table width="100" height="250" border="0" align="center" cellpadding="0" cellspacing="0">
   <tr>
      <td valign="top" height="100%">
         <div style="position:relative; background-color:#CCCCCC; min-height:100%; _height: 100%;">
         content, this div needs stretch to the entire height of the table
         </div>
      </td>
   </tr>
</table>
The above may need float to be set in order to get the expected results.... untested ;)

Posted: Tue Dec 20, 2005 8:59 pm
by josh
Thanks, I had to keep the height (without the underscore) in order for opera to render it correctly

So now I have

position:relative; background-color:#CCCCCC; min-height:100%; _height: 100%; height:100%;


and it's working in FF, opera, and *gasp*, IE.. Do you know if this will work in mac (safari / IE) ?

Posted: Wed Dec 21, 2005 1:12 am
by Chris Corbyn
jshpro2 wrote:Thanks, I had to keep the height (without the underscore) in order for opera to render it correctly

So now I have

position:relative; background-color:#CCCCCC; min-height:100%; _height: 100%; height:100%;


and it's working in FF, opera, and *gasp*, IE.. Do you know if this will work in mac (safari / IE) ?
Not sure whether it works in safari or not. I'd guess that it will do but I couldnt be 100%.

NOTE: You can get rid of underscored attribute now since you have a real height attribute after it which is overriding it in any case so it's superfluous ;)

Posted: Wed Dec 21, 2005 7:53 am
by Simon.T

Code: Select all

position:relative; background-color:#CCCCCC; min-height:100%; _height: 100%; height:100%;
slighty off track so sorry for that but whats the difference between "_height" and "height"?

Thanks,

Simon

Posted: Wed Dec 21, 2005 8:53 am
by josh
I think the underscore is a hack to make only certain browsers use that propery (IE), I couldn't be sure

Posted: Wed Dec 21, 2005 8:56 am
by Chris Corbyn
Simon.T wrote:

Code: Select all

position:relative; background-color:#CCCCCC; min-height:100%; _height: 100%; height:100%;
slighty off track so sorry for that but whats the difference between "_height" and "height"?

Thanks,

Simon
It's a fair question :)

To Internet Explorer, there isn't a difference. To all the other web browsers that follow standards, the underscore makes the attribute invalid and so it gets ignored.

So to firefox for example it sees something as whacky and useless as this :P And hence it simply does the min-height and ignores the rest

Code: Select all

min-height: 100%; muppety-moosey-moo: 100%;
Now to Internet explorer the underscore doesn't knock it off track so it sees:

Code: Select all

min-height: 100%; height: 100%;
Therefore Internet Explorer makes use the of the height attribute whilst other browsers ignore it. Simple as that :D