CSS Layouts and Patterns

Note

Classes / element names are all interchangeable of course. I’ll be defaulting to tag names for simplicity.

Nav at top, Footer at bottom, flexible content §

This is especially helpful when we want the footer to be always at the bottom, without any weird empty space below the footer. Using absolute, sticky or fixed will cause issues with overlapping elements. We don’t want that.

With this simple setup, our content will grow to fill all available room that isn’t taken up by the nav or footer. None of these elements will need to have heights with calc and variables for the other’s heights.

You can also remove the nav or the footer and this will work the same.

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
 
nav {}
footer {}
main {
    flex: 1;
}