Detailed explanation
A sticky footer is a layout pattern where the footer reaches the bottom of the viewport when a page has little content, but follows the content normally when the page is longer. Despite the name, it usually does not use position: sticky. The footer stays in normal document flow rather than remaining permanently visible during scrolling. This matters on pages such as login screens, empty search results, and short profile pages, where an ordinary footer might otherwise appear halfway up the screen.
A reliable implementation uses a column flex container around the page sections. For a simple document, use body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; } with main { flex: 1; } and footer { flex-shrink: 0; }. Place the header, main, and footer as direct children of the body. Removing the browser’s default body margin prevents unwanted gaps and possible scrolling around a viewport-height layout. If your application renders inside a root wrapper, apply the flex layout and minimum height to that wrapper instead, ensuring that main and footer participate in its flex layout.
Under the hood, flex-direction: column makes the vertical direction the main axis. The container’s minimum height establishes a page at least as tall as the viewport, and the main section’s flex: 1 lets it absorb available vertical space. This pushes the footer downward when content is short. With longer content, min-height allows the container to grow beyond the viewport, so the footer appears after the content and is reached by scrolling. Setting flex-shrink: 0 explicitly prevents the footer from being compressed when flex sizing encounters limited space.
Interviewers typically look for this distinction between a minimum-height layout and a positioned footer. Avoid position: fixed or position: absolute for this requirement because they remove the footer from normal flow and can cause overlap unless space is reserved separately. On mobile, consider min-height: 100dvh after a 100vh fallback so the layout follows the dynamic viewport as browser controls change. Check both short and overflowing content, rather than demonstrating only an empty page.
Key points to remember
- Use a column flex container with min-height: 100vh and reset the body margin.
- Apply flex: 1 to main so it fills unused vertical space.
- Keep the footer in normal flow; flex-shrink: 0 prevents compression.
- Apply the layout to the actual page wrapper, with main and footer as direct flex children.
- Use min-height rather than a fixed height so long pages can grow naturally.
Common mistakes candidates make
- Using position: fixed, which keeps the footer visible while scrolling and can cover content.
- Setting only height: 100vh, which constrains the container instead of allowing it to grow with the page.
- Applying flex: 1 to a nested main element whose parent is not the page’s flex container.
Likely follow-up questions
Can CSS Grid solve the same problem?
Yes: use body { margin: 0; min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; } for direct header, main, and footer children. The middle track fills spare space, while the outer tracks accommodate the header and footer.
Why not use position: sticky on the footer?
Sticky positioning changes an element’s scrolling behaviour within its containing constraints. It does not make a short page’s content area expand to push the footer to the viewport bottom.
What is the difference between 100vh and 100dvh?
On mobile, 100vh can correspond to the large viewport with browser controls retracted, so it may exceed the currently visible area. The dvh unit tracks the dynamic viewport, although resizing as browser controls move can cause layout adjustments.
Interview tip: Explain the short-content and long-content behaviour first, then show the flex CSS and clarify why fixed positioning is unnecessary.