How to make mainwrapper height 100%?

It's really bugging me that on short pages, the mainwrapper height isn't 100%. I've tried adding height: 100%; to the mainwrapper in the stylesheet but it doesn't do anything.

Here's one of my short pages so you can see what I'm talking about: http://gleefulthings.com/shop/index.php?main_page=page&id=3

I just want the footer to touch the bottom of the page leaving blank white space in the middle.

It is 100% of the content that is there

But I want it to be 100% the height of the window. Maybe it's not the mainwrapper I should be editing? I'm not really sure. It just bugs me that my short pages aren't touching the bottom.

julieoolie:

But I want it to be 100% the height of the window. Maybe it's not the mainwrapper I should be editing? I'm not really sure. It just bugs me that my short pages aren't touching the bottom.

The content of a page is built dynamically, therefore the height of a page will be 100% of the content that is available to fill the page.

So there's really no way to do it? :(

This is gonna drive me crazy lol! I swear I've seen other zen cart sites with short pages that touch the bottom. Maybe I'm crazy though.

But I want it to be 100% the height of the window.
And how will you know how big user "A"'s window is versus user "B"'s??

I don't know. That's why I was using % rather than pixels.

I'm sure it'll look fine to anyone with a small monitor but to people like myself with larger monitors, it just looks wierd to have all that blank background space at the botom.

Not everyone opens their browsers at full screen

But those of us who do will see the space :shocking:

Add another side box or 2

Or add a bunch of links

You are pining about what an empty representation appears when you should be populating this a start selling

There's pages that won't be very tall even when I have all my content in them.

And I'm not "pining" :P

This will need some css hack, check this:

http://www.pmob.co.uk/temp/3colfixedtest_explained.htm

You could add some < br /> tags to the bottom of the page, but that would result in the page always being longer than it should be.
Could probably use javascript to detect the users screensize, and dynamically change it, but that wouldn't work if javascript is disabled.

Don't worry too much - the site looks OK the way it is!!!

Thanks you guys :)

yellow, I tried to figure it out from the link you gave but it doesn't totally make since to me. I made the mainwrapper min-height:100%; and the body height: 100%; But I'm not getting any results from it.

I was just actually looking for the same issue, and I've (kinda) solved it but not to my liking, however maybe it'll work for you:

in stylesheet:
html {height: 100%;}
body {height: 100%;}
#mainWrapper {height: 100%}

either create those tags at the bottom of the style or add them in where they already reside.

And to all those that suggest adding side boxes and line breaks to make the page 'taller', it will still have a margin at the bottom!

-Tim

There were four places that worked for me:

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