← #72 Pure collapsible element

Always put the footer at the bottom

Topics: CSS

Assume that our page is organized by three parts: the header, main content and footer. It's a common layout that the footer is always displayed at the bottom no matter how long the main content is.

<div class="container">

Using CSS flexbox, the layout can be implemented as following:

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

header, footer {
flex-shrink: 0;

main {
flex-grow: 1;

Setting flex-grow: 1 to the main content will make it take the available spaces. The footer then sticks at the bottom.


The placeholders shown below are powered by the <placeholders /> elements.

Fix a typo or suggest an improvement
#74 Toggle hidden files on macOS