How to push a footer to the bottom of page when content is short or missing?

Sticky footer for all screen sizes

Browser consistency and reliability

Flex's approach is supported across modern browsers, ensuring your footer sticks to the bottom, providing the webpage's layout is consistent and reliable. Fixed positions might tempt you, but they can cause overlapping issues on different screen sizes.

Flexible content space

Facing dynamically changing content sizes? Don't sweat! Apply flex: 1; to your .content div, and watch it absorb any extra space ensuring the footer placement at the bottom like a good slate.

Full viewport height covering

The .wrapper class uses min-height: 100vh; to guarantee that the flex container spans the full viewport height. Thus, your footer would not shy away and stick to the bottom, even with a lack of content.

Handling dynamic footer size

With varying content sizes, footers sometimes need a bit more space than usual. You can take the footer size into account manually with calc(), setting the minimum height of the content area:

.content {
  min-height: calc(100vh - 100px); /* Subtracting 100px footer height just for fun */
}


Meeting response design necessities

Try to preserve responsiveness for varying content lengths and avoid fixed heights. About content and device variability - be aware and design consciously.

Multiple wrappers and complex layouts

When your webpage is getting fancier with multiple wrapper elements, just ensure the main .wrapper with flex properties contains the content areas you'd like to expand or contract.

Benefit of extraction

To make maintenance and understanding your code easier, extract common styles into CSS classes or variables. This will not only make you look smart (and you are!) but also help to adhere the DRY (Don't Repeat Yourself) principle.

Flex-grow for advanced layout

When direct child content elements are not practical in your flex container, a utility div with flex-grow: 1 can help push the footer down:

<div class="util-flex-grow"></div> <!-- I help push little footers down when content is shy -->


Responsive design and other footnotes

Dynamically adjusting content

If your page serves dynamic content, flex-grow: 1 on content ensures footer remain at the bottom regardless of content size.

Calculating sizes on-the-fly

calc() function can be used to adjust min-height of content area dynamically, considering your footer height.

Cross-browser support

Keeping cross-browser compatibility is a must, and luckily flexbox provides support across all modern browsers.

Adapting to different layouts

Flexbox allows us to create flexible, adaptable layouts, whether we are working on a blog, a portfolio site or an e-commerce store.

Handle overflowing content

To prevent accidental overlaps, consider using overflow: auto; on your content section:

.content {
  overflow: auto; /* Scrollbars. Because why not? */
}
