0

So I already played a lot with sticky footers, using negative margins technics, flexboxes, grid, and even table technics.

I just discovered the position: sticky; in MDN and thought "Yay! All that mess is finally gone!".

Damn it, it looks like I can't use position: sticky; to make a sticky footer, as the behavior I want to achieve is the opposite that's done: I want the footer to be stick at the bottom of the screen when there is not enough content to scroll down, and to be after the content when there is enough of it.

Can that be achieved with position: sticky;?

Fla
  • 536
  • 6
  • 23
  • 1
    If you are wanting the content to push the footer down, then I don't see why you would use position sticky for this. All that would do would make it overlap the bottom of the scrolling div. You could probably do something to use sticky, but I would envisage it probably using bottom padding on the scrolling div the same size as the footer, which would mean it was more hacky and less fluid than the simple flex solution – Pete Oct 04 '18 at 16:06

1 Answers1

-2

In this article you can read how to use position: sticky to achieve something similar only with CSS. I think for your problem it is better to use a little bit of JS to control the scroll of the page and add position: fixed to the footer if itś necessary.

Hope it helps!

Paco Gómez Capón
  • 485
  • 7
  • 17
  • 1
    I don't see an example of `position: sticky` in that article. I will certainly not use JS to do that, I can easily do it with 3 lines of CSS using flexboxes. This is only a curiosity question. – Fla Oct 04 '18 at 15:45
  • Ok, I have only used this to positioning things relative to the top of his parent. – Paco Gómez Capón Oct 04 '18 at 15:46