---
title: "Footer Spacer — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Abdat Ali · Interactive. Spacer that adapts to your footer"
canonical: "https://framer.elliotli.dev/component/footer-spacer"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Footer Spacer

# Footer Spacer

Spacer that adapts to your footer

[View on Framer](https://framer.com/marketplace/components/footer-spacer/?via=elliot-li)

![Footer Spacer preview image 1](https://framer.elliotli.dev/og/component/footer-spacer/23ace282a43102a1/1600x1200.jpg)

## Summary

Spacer that adapts to your footer

## Description

### How to Use 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.

### Getting Started

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.

### Configuration

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"\]

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-abvu5lln-kwDva4mGc8cX5e37zKIdYbwLdm1LAE)

### Setting Up Z-index

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.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-abvu5lln-pADGqxSXgypDlfG2mxGBq49vEhrp4x)

### That's 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #8753

## Details

- **Author**: Abdat Ali
- **Price**: $5.00
- **Published**: 2026-04-03
- **Updated**: 2026-07-19
- **Added**: 2026-03-16
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase