100% Page Height

Hello,

I want to give my site a 100% page height.

In other words, for pages that do not fill the screen vertically with content I would like the page to continue and fill the screen vertically.

Any suggestions would be very much appreciated.

Current site (work in progress) - http://www.safebaby.ie

There's a thread here:

http://www.zen-cart.com/forum/showthread.php?t=104107

But I think the real answer is to balance your middle content with your sideboxes.

Thanks for your help.

I added the following to my CSS file as the above thread suggested;

html {
height:100%;
}

body {
height:100%;
}

#mainWrapper {
height:100%;
}

This does make the page 100% height as I had asked but it does not move the footer to bottom of the page.

You can see what it is doing here: http://www.safebaby.ie/

Any suggestion on how to go about having the footer at the bottom of the page ( or hug the bottom of browser window) ?

Unfortunately no seems to know how to do this, so I have had to remove the changes I made above and revert back to having the site only take up two thirds of the screen.

Having the site only take up a certain amount of the screen is ugly in my opinion and if anyone ever comes across a solution for a 100% page height for Zen Cart please let me know.

Thank for the help anyway.

How about doing what you did and moving the footer down with something like this?:

#footerhsy {margin-top:200px;}

#footerhsy doesn't exist in a stock Zencart installation. That might be why it didn't work just by using the changes in the other thread.

Hi stevesh,

Thanks once again for your suggestion.

I tried what you suggested above but it unfortunately did not work (even though I see where you were coming from).

Result of the above suggested change can be seen here: http://www.safebaby.ie/

Which looks to me like exactly what you wanted, in IE anyway. It looks like the footer doesn't go down as far in FF, but you should be able to play with px, em or % in the margin statement to make it right, I think.

There were four places that worked for me:

html {height: 100%;}
body {height: 100%;}
#mainWrapper {height: 100%}
#contentMainWrapper {height: 100%}