Page 1 of 1

CSS 100% height question

Posted: Sat Apr 22, 2006 7:14 pm
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 :)

Posted: Sat Apr 22, 2006 10:32 pm
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.

Re: CSS 100% height question

Posted: Sun Apr 23, 2006 12:51 am
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.

Posted: Sun Apr 23, 2006 1:30 am
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;
}

Posted: Sun Apr 23, 2006 5:45 am
by Oren
Check out this: http://www.pmob.co.uk/