Support: 071 744 0084
Contact
071 744 0084
info@h-o.nl
Jos Verhaar - Magento support
Erwin Otten - New business
Paul Hachmang - Techniek

Sticky Footer for Magento: the Cut & Paste solution (CSS only!)

By Erwin Otten 21 maart 2011 Laat een reactie achter Ga naar reacties

When designing a webshop, you will always have pages that contain lot less content then other pages. In Magento for example, you'll have pages like customer login, contact, forgot password, search terms, 404 (noRoute) etc, which just don't fill your page enough. As a result these pages end up with a strange looking page with a footer filling 40% (or more, depends on the resolution of your workspace) of the physical space. This doesn't make sense - the footer isnt thát important - and personally, I think it looks bad.

So, If you may well know a nice way around this is to create a sticky footer. In other words, make your footer always stick to the bottom of page and only make your page scrollable when needed. The situation however, is that most solutions you'll find are pretty hard to implement. You'll have to add new HTML elements, rearrange your Markup, do a lot of testing etc. Well, I'm going to put an end to all that. Magento has really rich templates by default, so I've found a way to create sticky footers with just a few lines of CSS. No extra HTML markup, no editing templates!

The Cut & Paste solution.

Paste the following on the bottom of your styles.css file. As you can see, you'll only have to change '300px' to the desired hight or your footer (the main-container bottom-padding as the footer-container height). That's it!  Tested in internet explorer 6, IE7, IE8, Chrome, Firefox, Safari and Opera.

Let me know if everything works out for you too!

David Aschen

Works great, thank you

Erwin Otten

Thanks for the kind words David, appreciate it.

Patrick

When i implement this on my shop, it places the menu (electronics, furniture, appearal) to the bottom.

Bill

Thanks for sharing this. Worked great. Amazed I didn't need to adjust the layout at all.

Erwin Otten

Thanks Bill. If you're amazed by this, you should definitely take a look at our css only [url=http://www.h-o.nl/blog/improved_magento_one_page_checkout_design_css_only/]improved one step checkout design[/url].

Daniel

This worked like a charm with a slight modification to fit my footer. THANK YOU!

Magento Designer

This is an excellent post. I really appreciate with you. I enjoyed the post. Thanks for sharing.

Erwin Otten

Happy to share!

Rowan

Hi
Thank you so much! Very nice and easy to implement.
Only 1 thing, the location of my footer is different on some pages, any idea?

Bedankt!

Rowan

Arne Gartz

Thanks man, this helped me out!

Muhammad Azam

Realy very helpful post

Nic

That helps a lot! Really appreciate it!

Arek

Great post, Could you give me please suggestion what shell I change in the code to make it work
for Classic themes. I would be very grateful I have been trying to solve this problem for the past a few days.

Jon Dalton

Thanks for sharing this.
One slight problem is that the CSS statement :
body { height:100% }
stops the magento "remember-me-tooltip" (template/persistent/remember_me_tooltip.phtml) from displaying correctly.
For anyone not familar with this, in Magento (1.6?) and 1.7 CE there is the 'persistent cookie' function that can be turned on in the backend. When turned on, in a page such as 'Checkout > Billing Information' there is a checkbox to allow the customer to turn persistent cookies on or off. Next to the checkbox is a link named "What's this?" - when clicked a "popup" message box will appear.
The popup message box uses a dimmed bgackground over the viewport in the same way that product image "lightbox" extension for Magento uses. But with Sticky Footer being used, the dimmed background (called Window Overlay) does not extend all the way down the page to the footer *
* Note the billing information page being viewed was greater length than the viewport.
It seems that the amount of dimmed overlay being clipped is equal to the amount of page height that exceeds the viewport height.
Any thoughts on this much appreciated.

aj

It doens't work for me. Maybe I am doing something wrong. I have tried to change the high, but nothing happend. Is there maybe another solution?