# VuePress Tutorial 11 - Sticky Footer
# What We're Doing
We're going to continue styling the blog by making the Footer component we created in VuePress Tutorial 8 - Custom Footer into a sticky footer. We were going to be adding a highlight effect when hovering over the SVG (opens new window) icons in this tutorial as well, but the process is a little more involved than I remembered. So, we're going to be adding the highlight effect when hovering in the next tutorial.
Make sure you start the local development server which should be running at http://localhost:8080/ (opens new window) to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.
You can view all of the code in this tutorial by going to the tutorial-11 branch of the code-monkeys-blog-tutorials (opens new window) repository.
Now let's get started by discussing what a sticky footer is.
# What is a Sticky Footer?
A sticky footer adheres or sticks to the bottom of the browser window assuming there isn't enough content on the page to push the footer lower like on this blog post for example. If the content on the page is short like on the homepage, then the footer will still stick to the bottom of the page instead of appearing directly below the content above it.
There are multiple ways to add a sticky footer to your site, but we're only going to discuss how to use the CSS calc() function. If you're interested in learning about the other ways of adding a sticky footer, then check out Sticky Footer, Five Ways (opens new window).
# Sticky Footer Styling
Here's what the index.styl file looks like after adding the sticky footer styling:
Here we added min-height: calc(100vh - 10.3125rem) to a div tag with a class of theme-container.
If you inspect the browser and go to the Elements tab, you can see where the div tag with a class of theme-container is in the HTML of the blog.
The div tag with a class of theme-container contains all of the content of the blog except for the footer tag.
So, here we're using min-height: calc(100vh - 10.3125rem) to set the minimum height of the content inside of the div tag with a class of theme-container to be 100vh minus 10.3125rem which is the height of the Footer component including the top and bottom padding.
The unit of vh is relative to 1% of the height of the viewport which is the browser window size, so 100vh is 100% of the height of the viewport.
So, when we subtract 10.3125rem from 100vh, we're subtracting the height of the Footer component from 100% of the viewport height.
This means the minimum height of the content inside of the div tag with a class of theme-container will be the entire homepage height minus the height of the Footer component.
After setting this style, notice how the Footer component is now pushed to the bottom of the page. This is how we get the Footer component to stick to the bottom of the page.
Also, since we added this style to the index.styl file, this style will be applied globally to the blog which is fine since the Footer component will be used on every page in the blog.
Using a Fixed Footer Size
We're using a fixed size for the height of the Footer component which means if we change the height later on we'll have to update this value. In a future tutorial we'll be changing the height, so we'll have to update this value. If you prefer to not update this value whenever you update the height of the Footer component, then it may be worth looking into implementing the flexbox or grid methods for adding a sticky footer which you can find in the Sticky Footer, Five Ways (opens new window) post.
If you have questions about the CSS discussed above, then check out these resources:
- CSS min-height Property (opens new window)
- calc() (opens new window)
- CSS values and units (opens new window)
# Next Steps
As mentioned in the beginning of this post, in the next tutorial we're going to be adding a highlight effect when hovering over the SVG (opens new window) icons.