How to make height 100% so footer hugs bottom of browser window?

[nickharbormarine]

I did a search and found two threads that discussed this issue, but no solution was found. I have made many websites that utilized 100% height tables before, so that the bottom of the design would always rest against the bottom of the browser, however for some reason the Zen Cart site is giving me a lot of trouble.

My Zen Cart:
http://www.harbormarineparts.com/online_store/

My site with working 100% height table:
http://www.harbormarineparts.com/test/contactus.asp

I've gone so far as to try replacing all of the code in the tpl_main_page.php file, except for the body tags, with one table set to height=100%, and erase all stylesheets, and it still didn't work. However, if I remove all of the PHP and just leave the design copied into index.php, it works. My only guess is that there is something in the PHP that is preventing it from working; the design and stylesheets appear to be in working order.

Argh, it's a very frustrating problem. Any help would be greatly appreciated.

[barco57]

And what was the point of wrapping the whole thing in a table? oh and the center tags.....when it would have been simple to set margin: auto; on the mainWrapper

I'm also trying to figure out why you hard code the keywords, description meta tags, also the base href....they way they work stock you only needed to add the keyword and description to the metatags.php

How did I know you hard coded them....well 2 clues they are the same on every page and they are done to html 4 standards (tags not closed) instead of XHTML 1.0 Transitional like the doc type says for the page. The way you have done it you will always throw warning. By hard coding the metatags the search engines will never pick up product specific descriptions on the products thus giving the competitors a leg up when somebody searches from a specific part

Why are there inline styles....outside of the head tag and the javascript for the menu should be loaded in a .js file from your template

Your calling the bg2 image absolutely instead of relatively which will present itself as a problem on secure pages

lets try and do it right not fast......

[nickharbormarine]

Any ideas on why height of 100% doesn't work?

I didn't wrap the whole site in a table, I replaced the divs for the main design with a table. It is a matter of preference on this project. Coding and design elements will be cleaned up when I get to that point, really just started Monday. If I run into any problems with the things I've hard coded, they are very easily changeable as I have not modified any of the original Zen Cart files.

Regardless, those things should be irrelevant to the problem at hand. Why does setting the primary table to height:100% not work? I am certain that the problem does not lie with the actual design or the stylesheet as I have tested them. At this point I am doing guess and check with every block of PHP and javascript code. I hope someone might have some insight as to what's happening.

[Merlinpa1969]

I think the point was why are you running in circles to try to reinvent the wagon wheel when steel belted radials are available.....


rather than trying to rip ZC apart to re add tables, that have been deprecated by the way, why not follow the template convention of ZC and get your site up and running in very short order.

[CJPinder]

Regardless, those things should be irrelevant to the problem at hand. Why does setting the primary table to height:100% not work?

It does work, it is just not doing what you expect it to. If you set a height or width as a percentage then it is a percentage of the size of the enclosing element.

You have wrapped the table with a center tag which has no height specified. The center element therefore uses up only as much space as is needed and the table uses 100% of that.

Regards,
Christian.

[stevesh]

It appears that every division above the mainWrapper also has to be set at 100%.

Try in the stylesheet:

html {
height:100%;
}

and 100% in both body and mainWrapper

This should work with a stock Zencart.

[nickharbormarine]

It does work, it is just not doing what you expect it to. If you set a height or width as a percentage then it is a percentage of the size of the enclosing element.

You have wrapped the table with a center tag which has no height specified. The center element therefore uses up only as much space as is needed and the table uses 100% of that.

Regards,
Christian.

It appears that every division above the mainWrapper also has to be set at 100%.

Try in the stylesheet:

html {
height:100%;
}

and 100% in both body and mainWrapper

This should work with a stock Zencart.

Thank you stevesh and CJPinder, it was actually a combination of both of your suggestions that made it work. The center, html, and body tags all enclose the table, and all had to be set to height 100%. I discovered the root of the problem is that I am used to older HTML standards (HTML 3.x and earlier), where simply making the table height of 100% would be sufficient. Looks like I have to change some of my old habits.

I think the point was why are you running in circles to try to reinvent the wagon wheel when steel belted radials are available.....

rather than trying to rip ZC apart to re add tables, that have been deprecated by the way, why not follow the template convention of ZC and get your site up and running in very short order.

I would rather dive in and see how it works, and have complete control over the layout. How could you not want to do that? I am using the template conventions of ZC still, with the exception of a few changes.

I may switch back over to a div layout, since tables aren't recommended for use as page layout anymore (not depreciated though). It is an old habit to break. Thankfully it is very simple to do so.

[barco57]

So the Zen Cart development team spend all of this time removing most of the tables and will be removing the rest shortly......and you stick them all back in......so you can have complete control over the layout

[edwardtilbury]

It appears that every division above the mainWrapper also has to be set at 100%.

Try in the stylesheet:

html {
height:100%;
}

and 100% in both body and mainWrapper

This should work with a stock Zencart.

DOH!!!
HTML 100% height... that was driving me nuts!!! Thanks for the tip!

[Bikeforce]

I have tried doing this but for some reason it isnt working on mine