Stretching a div to the full height of a table

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Stretching a div to the full height of a table

Post 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
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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 ;)
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Post 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) ?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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 ;)
Simon.T
Forum Newbie
Posts: 6
Joined: Tue Dec 20, 2005 5:36 am
Location: Malaga, Spain

Post 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
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Post by josh »

I think the underscore is a hack to make only certain browsers use that propery (IE), I couldn't be sure
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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
Post Reply