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

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. :dontgetit

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......

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.

:frusty:

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.

nickharbormarine:

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.

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.

CJPinder:

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.

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.

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.

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.

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 :blink:

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.

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

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

And we can't tell you why unless we can see your site live.

Haha, that fixed mine too....:clap:

I tried this and it worked for my first page found here:

http://www.cartoolconnection.com

However, when you go to one of my categories and scroll down you'll find that you can see the diamond plate background showing through the middle column because I have the navmain wrapper set to 100% (I'm guessing):

http://cartoolconnection.com/index.php?main_page=index&cPath=70

So how can I fix it so that the whole page (the dark brown/black part) extends the whole length of the page (instead of conforming to main_page image) while still maintaining that the categories pages also extend all the way to the bottom?

tabitha:

I tried this and it worked for my first page found here:

http://www.cartoolconnection.com

However, when you go to one of my categories and scroll down you'll find that you can see the diamond plate background showing through the middle column because I have the navmain wrapper set to 100% (I'm guessing):

http://cartoolconnection.com/index.php?main_page=index&cPath=70

So how can I fix it so that the whole page (the dark brown/black part) extends the whole length of the page (instead of conforming to main_page image) while still maintaining that the categories pages also extend all the way to the bottom?

This article may help ( matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page )

This is also a good link (I think it uses the similar if not the same code as the above link) that's easy to follow:

http://www.cssstickyfooter.com/using-sticky-footer-code.html

clydejones:

This article may help ( matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page )

Hi Clyde

Are any of your templates "full-height" design, where the footer always sits at the bottom of the screen unless content pushes it lower?

dw08gm:

Hi Clyde

Are any of your templates "full-height" design, where the footer always sits at the bottom of the screen unless content pushes it lower?

No, but they could easily be set to do so using the CSS from the article I cited.

clydejones:

No, but they could easily be set to do so using the CSS from the article I cited.

LOL

I have been trying for more than a year to create a three column div-based layout with the footer always at the bottom of the screen (unless content pushes it lower).

I have successfully used pmob's tried and true method with other websites but for some inexplicable reason this method fails with ZC.

After another ten hours of trial and error, I finally got it to work. :clap:

This is the critical part of my stylesheet.css

html, body {
	height: 100%;
	}

* html #mainWrapper {height:100%;}

body > #mainWrapper {min-height: 100%;}

body {
	max-width: 1200px;
	margin:0 auto;
	padding: 0;
	border: 0;
	}

#mainWrapper {
	position:relative;
	min-height: 100%;
	width:100%;
	overflow: hidden;
	margin:0 auto;
	margin-bottom: -130px;   /* Height of the footer */
	padding-bottom: 0px;   /* Height of the footer? */
	}

#contentMainWrapper {
	min-height: 100%;
	margin: 0 auto;
	margin-bottom: -130px;   /* Height of the footer */
	padding-bottom: 130px;   /* Height of the footer */
	overflow: hidden;
	}

#contentColumnMain {
	min-height: 100%;
	overflow: hidden;
	margin: 0 auto;
	margin-bottom: -130px;   /* Height of the footer */
	padding-bottom: 130px;   /* Height of the footer */
	}

.centerColumn {
	min-height: 100%;
	overflow: hidden;
	margin: 0 1em;
	padding: 0 1em;
	padding-bottom: 130px;   /* Height of the footer */
	}

Please do not ask me why or how this works, especially padding-bottom: 0px; in #mainWrapper which has me mystified.

However, if there are errors or a better way, please advise.

Nope, spoke too soon, it does not work. :no: