How to stick footer to the bottom…

[Historical Forums User]

The title is pretty self-explanatory and this will (hopefully) be a pretty easy fix, but I’m just not able to figure it out by myself.

The footer should stick to the bottom of the yellow div. If you slide down some of those menus and there’s not enough vertical space the footer should move down with the content and stop being visible unless, of course, you scroll down.

Thanks.

http://codepen.io/01010110/pen/eJyyba

[Paulie_D]

Your Codepen doesn’t seem to show the issue..did you forget some javascript or something?

Regardless, these are several “sticky footer” options you can find with a quick Google Search.

[Historical Forums User]

It does show. The footer (© 2016 Lorem ipsum.) should be at the bottom of the yellow div, not near the red text.

I know there are. I googled and tried several different methods, unfortunately never quite got it right.

[Paulie_D]

I googled and tried several different methods, unfortunately never quite got it right.

Well perhaps you could show us oen of those attempts?

[bearhead]

Is this what you’re looking for?
http://codepen.io/kvana/pen/vLpaZP

I wrapped all of the content before the footer in a div, then applied the following css:

.wrapper {
  min-height: 100%;
  margin-bottom: -16px; /*negative footer height*/
}
.wrapper:after {
  content: "";
  display: block;
}
.footer, .wrapper:after {
  height: 16px; 
}

This method does require you to have a set footer height…

[Historical Forums User]

It’s this one, right?

That’s actually the first method I tried, but it changed nothing!

It still looks like this

When it should look like this

[bearhead]

Did you take a look at my pen? At least on Chrome it has the copyright line at the bottom like you wanted…

Maybe you just didn’t implement the sticky footer correctly?

[Historical Forums User]

Yes, that first screen shot is from your pen and as you can see the footer did not move. I’m on Safari, but that shouldn’t mess anything up, right? At least I haven’t ready anything about it not working on Safari…

[bearhead]

hmm, I guess that method doesn’t work in firefox/safari unless the footer and page wrap are direct children of the body… weird :|

I tested it out with the css tricks example, and experienced the same issue as with your page.

I guess my advise would be to see if you can re-write the html and css such that the footer and page wrap are direct children of the body.

oh, you’ll also have to add

body, html{
  height:100%;
}

[Historical Forums User]

I don’t see how I could do that.
The footer’s gotta be inside the page wrap, hasn’t it?

[bearhead]

No, in the example I gave the page wrap and footer should be siblings that are a direct child of the body.

But I’ve been looking at your pen a little more closely, and I think the flexcroll class is causing some conflict… the yellow div is positioned absolutely, so you should be able to keep the footer at the bottom of it with:

.footer{
position:absolute;
bottom:0;
}

and letting the yellow div have a height of auto, so that it expands with the content.
However, the flexcroll class seems to be applying a set height to the div.

Here is an example without the flexcroll class:
http://codepen.io/kvana/pen/qbpLNz

Also, the sub groups are expanding but not contacting in Chrome for some reason :|

[Historical Forums User]

Sorry, but that is definitely a no-go!
The yellow div gotta have that exact size. It can not grow as you expand the content.

[Historical Forums User]

Hey Bearhead, have you updated your first codepen?
The one from this post?
https://css-tricks.com/forums/topic/how-to-stick-footer-to-the-bottom/#post-237126

[Paulie_D]

Flexbox can do that depending on what browser support you need.

http://codepen.io/Paulie-D/pen/JGpoRV

[Historical Forums User]

Should Safari not be supported?
http://caniuse.com/#feat=flexbox

I run your pen and it still looks like this

[Author]

Posts