Sticky footer issues on IOS

Community resources General
1

Hello everyone,

I have my footer set to be sticky using a footer wrapper with a height of -100svh and a spacer with a height of 100svh. I’ve tried using both VH and DVH, and they work perfectly on desktop. However, on my Apple iPad, the footer is peeking through the section above it (see the screenshot). Does anyone know how to fix this issue?

Thanks,
Mark

Webflow share link for website

Staging link for website

sticky-footer
sticky-footer2732×2048 333 KB

2

Hi Mark,

Here’s how to create a sticky footer using flexbox:

  1. On the Body (All pages) element, set these properties:

    • Display: flex
    • Flex-direction: column
    • Min-height: 100vh

  2. For your footer element:

    • Set margin-top: auto
    • Keep all other footer styling as needed

This approach ensures your footer stays at the bottom of the page even when content is shorter than the viewport height. The flex layout automatically pushes the footer down while maintaining its position when content extends beyond the viewport.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

iOS handles vh units differently when the browser chrome shows/hides , try switching your wrapper/spacer to 100dvh instead, and make sure the parent is set with min-height:100% + overflow:auto. Had this peek-through issue on an iPad build and that combo fixed it.

4

@WebsiteMaintenance ,

Thanks for your suggestion.

When you say the parent, do you mean the wrapper? That’s the very top of the footer. Then above that would be the next section.

Mark