Making a table take up full height?

[ICEDesign]

http://boosttruckracing.50webs.com/

Please visit my above website for reference.

I am currently designing a website for a friend, and I wish to have the bottom part of the table (there will be a 600x50 flash movie in the space at the bottom). I wish for the bottom of that movie to touch the floor of the document.

No page's contents will exceed past the end of the page (perhaps on 800x600), but not on 1024x768.

I have investigated some websites, and http://www.rarlab.com/ successfully accomplish what I'm after.

NOW. I've studied their website, the code, the CSS instructions of the page, yet I simply CAN'T get mine to do the same.

I've tried making the height of the side bars (where it fades) 100%, while the middle section of the table (where the text is) has NO height restriction, so therefore it should stretch to allow the sidebar to be 100%.

After this I created a new website, with just a colored table with borders, so I could TRY to make it work. I made 1 of the cells 100% height, and low and behold it didn't work (I'm copying what rarlabs used on their website).

Please help :P (I'm new here).

ICE

[Buzz]

Table heights aren't w3c compliant and don't really work that way. Table CELLS can have a height but it's not recommended. The site you post as an example simply has enough content to fill the page, which automatically forces a bottom row to the bottom of the window.

The only real way to force something to the bottom of a window with a table is via javascript which gets the size of the window then forces something to the bottom. Very cumbersome and really not recommended.

With CSS (no tables) you can use absolute positioning. But absolute positioning has it's faults too. You could also specify a height: 100% property in a style sheet for a table.

In general, I find it's just bad design to plan on something being at the bottom of the window at all times. You should design with a footer in mind that will be below all other content and it may or may not be at the bottom of the window.

The only real way to be certain something will always be at the bottom of a window is to have enough content to fill up the window before the footer info is present.

[ICEDesign]

Having enough content to fill the page would also rely on the viewers resolution, as them having a lower resolution will create a scrollbar... which means it doesn't fulfill its purpose, and those who view it on a higher resolution, will see the footer moved UP from the bottom of the page, a the text + everything will be smaller and take up less room.

That was my same thought about the rarlabs site.... until I took it into dreamweaver, removed all content from the site, specified a height of 30 on the cell. yet it STILL took up the whole page. I then couldn't really understand it .

I noticed in their code they had something pointing to a piece of javascript on the internet. I don't understand java just yet... I guess its time to learn!

[ICEDesign]

I got it working.... basically I removed EVERYTHING off the rarlabs site... and started from there.... Weird though.

Its weird because I copied their CSS styles sheet.... copied a lot of stuff trying to troubleshoot the problem! But... this seems to be the only solution. It's not updated on the web just yet, it will be though soon enough.

Sorry for not editing my post, I decided I would post again to give this thread a 'new post' look so people with the same problem (if there is any), will be able to see I found a solution.

Thanks :P

[degsy]

Just for reference, here is an example using CSS
http://bonrouge.com/~faq#hundredpercent

[oracle128]

Originally Posted by ICEDesign

I noticed in their code they had something pointing to a piece of javascript on the internet. I don't understand java just yet... I guess its time to learn!

The first thing you should learn, is that Java is not JavaScript. Doing so will save you alot of confusion. When you're ready, you can learn JavaScript here.