Sticky Footer Pattern — CSS Technical Interview Questions & Answers

Keeping a footer pinned to the bottom of short pages.

Sticky Footer Pattern

  • Sticky Footer Pattern (css design) is a CSS topic. In plain words you use it for a sticky header in a long article. Don’t start with a slogan — start with that picture.
  • Smallest example: position: sticky; top: 0. Type it, run it, and say what you see. If you can do that from memory, you know Sticky Footer Pattern (css design).
  • From the example next to this theory: Keeping a footer pinned to the bottom of short pages.
  • Trap: z-index war without a stacking context. Fix that before you talk about advanced CSS.
  • Viva: what is Sticky Footer Pattern (css design)? Then show position: sticky; top: 0. Then name the trap.

Technical Interview Tip: What is Sticky Footer Pattern (css design)? Show this: position: sticky; top: 0. Trap: z-index war without a stacking context.

Code Examples for Sticky Footer Pattern

Sticky Footer Pattern — working example

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page__content {
  flex: 1; /* grows so footer sits at bottom on short pages */
}

.page__footer {
  padding: 1rem;
  background: #f1f5f9;
}

Sticky Footer Pattern — flex column + flex: 1 on main content pins the footer to the viewport bottom on short pages.

How to Explain Sticky Footer Pattern to an Interviewer

What is Sticky Footer Pattern (css design)?

Used for a sticky header a long article Not just the heading

Give one small example of Sticky Footer Pattern (css design).

position: sticky; top: 0 Keeping a footer pinned to the bottom of short pages

What mistake do beginners make with Sticky Footer Pattern (css design)?

z-index war without a stacking context Show the fix

Where do you use Sticky Footer Pattern (css design)?

a long article a sticky header