What's the best way to support a sticky footer using Paste?

[cdignam-segment]

The Topbar component works well as a header, but its position is fixed with position="sticky" and top="0", so it doesn't work well as a footer.

My current solution was to copy the Topbar component and modify the props for my needs.

    <Box
      // make top bar and footer sticky while the center scrolls.
      display={'grid'}
      gridTemplateRows={'auto 1fr auto'}
      height={'100vh'}
    >
      <Topbar/>
      <Box width={'100%'} overflowY={'auto'}>
        Scrolling content here
      </Box>
      <FooterFromModifiedTopbar />
    </Box>

I'm wondering if there is a built in way to provider this sticky footer behavior with paste.

Here's an example design:

https://www.figma.com/file/nnGt6Z2y6oiozdeoW05W9X/Flex-Unify-Designs?type=design&node-id=1565-102950&mode=design&t=jVeVs28rdU8kRlBp-4

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that. The Paste documentation does not provide explicit information on how to modify the Topbar component to function as a sticky footer.

---

Here are some similar discussions:

• Overlay scroll to top button requirement - Answer (updated: 2023-09-27T23:48:50Z, similarity score: 0.87)
• Unable to use Box paste component in my environment (updated: 2022-06-28T10:46:56Z, similarity score: 0.85)
• Sticky sections on scroll - Answer (updated: 2022-08-08T13:54:58Z, similarity score: 0.85)

[SiTaggart]

Hi @cdignam-segment

We don't have a set way or component for creating a fixed footer to a page or form.

Fortunately, Paste is very flexible, and you can achieve the same results in a lot of different ways. The way you've done it is perfectly fine. You could also set your footer to position sticky or absolute and attach it to the bottom of the window.

At some point, we'll have to explore site and page footers in more depth to help keep our experiences feel more cohesive, we've just not gotten to it as no one was updating any of them. Hard to prioritize that way.

[TheSisb]

Following up here to say that I wouldn't recommend modifying our Topbar as a sticky footer, and instead to use Box directly. I say this for two main reasons:

• If Topbar changes in any way, you may not want that change automatically propagating to your custom footer component
• It's not semantically accurate, which can be confusing for future maintainers

Sticky footers usually depend on the rest of your website's frame elements being set up in a specific way to support it properly. Here's a great article, in which I recommend the flex or grid solution if possible:
https://css-tricks.com/couple-takes-sticky-footer/