Footer Spacer — Spacer that adapts to your fixed footer
The Fixed Footer component automatically calculates the height of your fixed footer and creates a matching spacer so your page content is never hidden behind it.
Copy the Fixed Footer component into your Framer project from the Marketplace and place it at the bottom of your page content — just above where your fixed footer sits.
Select the component on your canvas and head to the right panel. You'll find a Footer Selector property. Enter the exact name of your footer component or stack here. The name must match precisely — including capitalization — with how your footer is named in Framer.
For example, if your footer stack is named “footer”, enter: [data-framer-name="footer"]
For the fixed footer to work correctly, make sure your Z-index values are set properly. Your page content should have a higher Z-index than the footer. For example, set your homepage to a Z-index of 2 and your fixed footer to a Z-index of 1. This ensures your content always sits on top of the footer and scrolls naturally above it.
The spacer will automatically match the height of your footer and update whenever the browser is resized, keeping your layout pixel-perfect on all screen sizes.
Abdat Ali
