CSS 100% height question

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

CSS 100% height question

Post by alex.barylski »

Tables, it's done like this or at least how I do it

Code: Select all

<table width="100%" height="100%">
 <tr><td>Header</td></tr>
 <tr><td width="100%" height="100%">Body</td></tr>
 <tr><td>Footer</td></tr>
</table>
Now anything that goes in body has the entire screen minus header and footer to play in...

And when there is no body, the footer nicely aligns at the bottom of the page instead of right under the header...

How can this be done using 100% CSS XHTML compliant code???

Cheers :)
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Post by Christopher »

I don't think there is a clean way to do this in both IE and Mozilla. I read somewhere that you can put a <div style="border:1px solid white;"> around everything.
(#10850)
d3ad1ysp0rk
Forum Donator
Posts: 1661
Joined: Mon Oct 20, 2003 8:31 pm
Location: Maine, USA

Re: CSS 100% height question

Post by d3ad1ysp0rk »

Hockey wrote:How can this be done using 100% CSS XHTML compliant code???

Cheers :)
Tables are 100% CSS XHTML compliant :D

That basically means I have no idea on how to do it simply.

Heck, I spent an hour+ trying to figure out how to align something in the exact middle of the screen (since vertical-align != valign.. unless in tds) and ended up saying screw it and just using a few <p>&nbsp;</p>'s to space it down.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

IE can't handle height: 100% values. There is a write-up on this at Position is Everything (their server is having problems right now). I think there is something that you can do (like adding a 1px bottom border to make it render) but it is not guaranteed.

As for centering on the page, use the auto attribute of the margin-right and margin-left CSS elements...

Code: Select all

#mywrapper {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

Check out this: http://www.pmob.co.uk/
Post Reply