Kevin Powell - Community•2y ago

Problem with 'position sticky;'

I wanted the footer to be in bottom whenever the page is scrolled, but position: fixed; was a little problematic for me, so I used position: sticky;, it works as expected but in some cases, it was not in bottom (like in the img). Help?

30 Replies

Joao•2y ago

Check the margin/padding on the body.

MelodiumOP•2y ago

* has 0 margin and 0 padding

Joao•2y ago

Can you upload the code to codepen?

MelodiumOP•2y ago

just the footer code

footer {
  position: sticky;
  width: 100%;
  bottom: 0;
  padding: .5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--secondary-bg);
  gap: 10px;
}

footer {
  position: sticky;
  width: 100%;
  bottom: 0;
  padding: .5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--secondary-bg);
  gap: 10px;
}

Unknown User•2y ago

Message Not Public

Myndi•2y ago

Is the HTML and Body using 100% of the width?

Joao•2y ago

We can keep guessing, or you can upload the code to codepen for us to take a look? Please see https://discord.com/channels/436251713830125568/1022288836715356180/1022288836715356180

Myndi•2y ago

I'm just saying because sticky elements have issues due to the width of HTML/Body.

Joao•2y ago

It could be a nested element in the last element on the page that has a large enough padding or margin that causes this.

MelodiumOP•2y ago

yes

Joao•2y ago

But again, we're just guessing but if we had the code... 🤔

MelodiumOP•2y ago

footer's parent is body my structure

<body>
  <header>
    header code .....
  </header>
  
  <main>
    main code .....
  </main>

  <footer>
    footer code .....
  </footer>
</body>

<body>
  <header>
    header code .....
  </header>
  
  <main>
    main code .....
  </main>

  <footer>
    footer code .....
  </footer>
</body>

Myndi•2y ago

Just post a codepen.

MelodiumOP•2y ago

umm ookie

MelodiumOP•2y ago

@myntsu @joao6246 here https://codepen.io/GiteenShiro/pen/QWxQJBd

GiteenShiro

CodePen

QWxQJBd

...

Myndi•2y ago

But in the example it works just fine?

Joao•2y ago

It seems only when the viewport height is not big enough. You can probably fix by setting a min height on the body of 100vh and then going back to using position fixed on the footer

MelodiumOP•2y ago

fixed or sticky?

Joao•2y ago

Position fixed.

MelodiumOP•2y ago

ok but the content is going inside the footer u sure?

Joao•2y ago

If that's the effect that you want, then increase the height of the footer. Yes,

MelodiumOP•2y ago

nope

Joao•2y ago

The problem with sticky is that the document will remember the position it should fit and make room for the element. If the footer was never high enough it won't cover that last gap

MelodiumOP•2y ago

i want the content to be shown above the footer, not the content inside the footer can i use max-height and fix it?

Joao•2y ago

Yes just increase the height of the footer a bit until it covers the gap

MelodiumOP•2y ago

but in larger devices the same problems occurs right

Joao•2y ago

Mmh I'm not sure why is doing that right now, but using top:100% instead of bottom: 0 on the footer might work as expected

Unknown User•2y ago

Message Not Public

13eck•2y ago

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

main {
  flex-grow: 9999;
  overflow-y: scroll;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

main {
  flex-grow: 9999;
  overflow-y: scroll;
}

No need for messing with positions, just have the body be full height and flex, with the main element taking up all the free space. Aslo, never do this. Only change margin/padding purposefully. Generally nuking leads to "why isn't this working?" as seen here: https://discord.com/channels/436251713830125568/1044707398750842890 Granted that example isn't * {margin: 0;} but the outcome is the same, they removed the margin because…no specific reason and can't figure out why there's no margin on their elements. The browser defaults are pretty good, much better than any dev I've seen who nukes margin/padding like this. You'll miss something and you'll run into spacing problems. Don't change the default without specific reasons.

MelodiumOP•2y ago

ummm im not much better in css maybe i should learn it 😓

Gaming

Programming

Problem with 'position sticky;'