To create a footer, a div that sits at the bottom of your viewport, using the position: “fixed” CSS.

For example here’s a snippet using material-ui’s createStyles function

footer: {
  position: "fixed",
  bottom: 0,
  marginBottom: "10px",
},

This will display the element it’s assigned to at the bottom of the screen using the fixed and bottom attributes, just to give it a bit of space we’ll using marginBottom so it floats above the bottom of the screen.

There’s a problem with the fixed position. It’s width is relative to the viewport, not relative to the parent.

This mean’s in a situation where you might have a user interface where the screen is divided into two columns and you want the fixed div in the right most column, you’ll find the width will extend outside if the view.

We’ll look at how to solve this, in the next post.