Zentastic theme: fix footer to bottom

Hi Alex,

Are you looking for what's called a Sticky Footer? If so, there are a couple ways to do it. ModeratorWes once posted about doing it with jquery:

https://support.zendesk.com/hc/en-us/community/posts/203420296-Humble-squid-footer

However I did it a little differently for my page. Here's what it looks like, stuck to the bottom, when there's not enough content to push the page down:

So let's get started! We'll somewhat emulate these pages:

http://ryanfait.com/html5-sticky-footer/

https://css-tricks.com/snippets/css/sticky-footer/

I'll explain the 2nd one, since that's what I'm currently using. I'll also use a default theme with nearly everything removed. We're essentially going to wrap the entire page (except the footer) in a container, give it a height of 100% so it pushes the footer down below every page, and then give it a negative margin-bottom equal to the footer's actual height - this will allow the footer to appear as if it's sticking to the bottom.

First, we'll need to put an opening <div> tag in the 'Header.' However, we're not going to give it a closing </div> tag here, but instead on every other page of our Zendesk. It's an interesting trick, in that Zendesk slaps these pages together in order when a user loads the site, so technically we don't actually have to close our tags on the same page we created them in! This allows us to create our own site container, instead of relying on the <main></main> tags that Zendesk applies automatically to our site:

As you can see above, the site container doesn't have a closing div tag. So let's go to the home page, and add it there.:

Oh goodness! Zendesk has thrown us an error in the form of a pink highlight. Fear not, the error is only saying that the tag is invalid for this particular page. When we save and view the site however, we'll see that the site is correctly wrapped in the site-container div. 

The last thing we need to add is the footer! Here's a super simple one. As a note, I'm using inline styles only for the sake of these examples:

And here's what our page looks like, ugly but gets the point across!

Now let's go to our CSS page and get that blue sticky footer to start sticking to the bottom. First, reset all the browser's default margins by putting margin:0 in '*' (an asterisk in css targets everything). Then, give the body and html a height:100%:

Doing that allows us to also give a height of 100% to our custom site-container div, since it's living inside of html and body. However, we're actually going to give it a min-height:100% instead, so it will always be that size:

If you've done everything correctly and reload the page, you'll notice that the footer disappears until you scroll down - perfect! That means the footer is being pushed down by the site container, which has a permanent height of 100%. Now we need to do some edits to the footer. Here's what I have:

It gets a little complicated, and will require some tweaking. We add a margin-bottom of -120px to the site container, which drags the footer up to the height of the footer itself, 120px. The site-container also has these 2 weird :after css selectors. The first one is a trick to make sure the site-content container actually has content, to prevent it from doing wonky things in the browser. The second one is a trick for consistency.

A couple more changes: I noticed the default theme was giving that invisible <main></main> tag some huge padding that got in my way, so I reset them both to 5px. It also had a huge padding-bottom on the body, so I reset that to 0. If you're having trouble, definitely check these values:

Here's what the page looks like now. The footer SHOULD be attached to the bottom, with no scroll bar, on pages where there is very little content:

Let's test it out! If I add a bunch more list items of those Latin lyrics, the footer gets pushed down properly:

And there you have it. Sticky footer. Remember to add a closing div to the rest of your pages, so the footer works properly. As another side note, what I did above may cause the <main> tags to appear broken in an html inspector, even though they work correctly. In that scenario, all I did was close the main tag myself before each closing site-container div tag. Now the inspector will pick up 2 closing main tags, but at least nothing is truly broken. Here's a screencap of my notes on the matter, which should explain it better:

This was a doozy, so definitely reach out if you need more help!

-Duke

Hi Duke,

Moving the wrapper into the header made it do what it was supposed to do!

Thank you for your help.

I do have one more thing...

There seems to be a margin or padding somewhere on my site that causes the footer to be pushed down 50 additional pixels. This means that there is scrollbar on every page for those last 50 pixels.

I wasn't able to remove this padding, and I cant find which div is causing it with the google chrome developer tools  (pressing F12),

Any idea where these 50px might come from?

I can give you (or anyone else) the site name if necessary.

Thanks in advance!

@Alex - Glad to hear Duke got you all sorted out and by the way thanks for using one of my themes.

@Wes - Thank you for creating the theme! We love it.

Hi Alex,

You can definitely toss me your site name at dkisch@exagoinc.com and I'll take a look at it! After that I'll likely post my findings here, as a reference for anyone that comes across this thread in the future with a similar problem to yours

As an update for future readers, Alex reached out and we found a solution to the issue.

If your page has an element along the top with a 'margin-top' css property (like the navigation) use 'padding-top' instead. Margins will push the entire element, whereas padding will push things within the element itself. Because of this, something like a navbar with a margin-top will add to the page container's min-height of 100%, which in turn will push the sticky footer down. 

TL;DR, replace your top-most element's margin-top with padding-top!

Duke, thanks so much for posting the solution for the community!

Amazing, Duke. Thanks so so much!

Oh, I may have spoken too soon.

I'm having the same problem that Alex had. There seems to be something that causes the footer to be pushed down some. Prior to publishing the changes, the preview looked perfect. But the live version of the site isn't.

I replaced the top-most elements margin-top with padding-top, but maybe I'm missing something.

Don't mind me, just answering my own question...

It was just the "zd-hc-navbar" element (agent top menu) that was pushing everything down. All is well.

Glad you could get it working, Elizabeth. Zendesk's new agent panel now being docked at the top of the page semi-borked my own sticky footer, which I'll detail here in the near future for anyone else who comes across this thread

Glad you could get it working, Elizabeth. Zendesk's new agent panel now being docked at the top of the page semi-borked my own sticky footer, which I'll detail here in the near future for anyone else who comes across this thread

Oh, good point. Yes, Duke, it'd be great if you can add an update for fixing that. Thanks!