Create modern sticky footer using CSS grid and FlexBox and calc() function

Create modern sticky footer using CSS grid and FlexBox and calc() function

16th October 2018 0 By Azadeh

There are couple of ways to create a modern sticky footer. Typically we are used to negative margins and absolute positioning. But we could use CSS grid and FlexBox and calc() function to build them along the way.

Sticky footer with calc() function

Firstly we create a sticky fixed-height footer using calc() function to calculate the minimum height for the content in the page. Afterwards we reduce the footer’s height from that. Here is the HTML code for the idea:

<body>
  <div class="content"> </div>
  <footer>© 2016</footer>
</body>

And the CSS with calc() function:

.content {
  min-height: calc(100vh - 20px);
}
.footer {
  height: 20px;
}

Also there is a pen in CSS tricks that shows how it works:

See the Pen Sticky Footer with calc(); by Chris Coyier (@chriscoyier) on CodePen.

Therefor no overlapping happens and two elements ( div.content and footer) will stack on top of each other making it 100% height. But the footer needs a fixed height.

Sticky footer with FlexBox

We will solve the fixed height problem easily using FlexBox. We will have a variable height footer in this case. There are two ways for FlexBox option.

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

We can use margin-top: auto for footer to push it away as far as needed from the rest of the content.

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.footer {
  margin-top: auto;
}

Alternatively give the content a flex: 1 so that it grows to fill the space:

.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

See the Pen Sticky Footer with Flexbox by Chris Coyier (@chriscoyier) on CodePen.

Sticky footer with CSS Grid

With CSS grid we can use more modern code to create sticky flexible footer. CSS grid is 88% supported globally and is ready to use for production. Here is the CSS code using grid:

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 1;
  grid-row-end: 2;
}

Using grid-row-start we specify where the footer starts as we have a two row layout. And with grid-row-end we specify the ending of footer. Also using  grid-template-rows: 1fr auto; we make a flexible height grid layout.

See the Pen Sticky Footer with Grid by Chris Coyier (@chriscoyier) on CodePen.

We can also simply remove footer code and only set grid-template-rows:

grid-template-rows: auto 1fr auto;

As we mentioned at the beginning there are other ways like absolute positioning footer on the bottom or giving it negative top margins or give content negative bottom margin equal to footer height. Although they are still valid solutions but we need to write more code with fixed footer heights and less maintainable. Set aside they are not modern approaches. Lets get modernised.

Thank you for reading.