MoreLesson 206Free preview

Fixed Footer

This lesson is part of How To · All levels

Summary

Fixed footer is a bar that is always visible at the bottom of the viewport, even if the page is flipped. This effect is achieved by position: fixed, bottom: 0, and width 100%. Because elements are out of the normal groove, the page content needs to be padded down so that the end of the section is not closed to the footer.

Key points

Position: fixed attaching footer to viewport, not to page
Adjust bottom: 0 and left: 0 to fully attach to the bottom
Add padding-bottom to the body as high as the footer so that the content is not covered
Use the z-index to keep the footer above other content

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.