The Sticky Header & Footer

Why sticking

The layout has the header and the footer elements that they do not scroll with the page. The sticking behavior is achieved by applying the CSS property “position: sticky” to these elements. By setting the values “top: 0” for the header and “bottom: 0” for the footer, the elements are positioned at the top and bottom of the page, respectively, and remain in place as the user scrolls.

Why the footer is laying on the bottom

To ensure that the footer remains at the bottom of the page, a flex layout is used. The flex property is applied to the parent element of the footer. The middle column is set to grow, with the value auto for flex-basic property.

.sticky-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sticky-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  padding: 1em 0;
}

.sticky-footer {
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
  flex-shrink: 0;
}

.sticky-main {
  flex: 1 0 auto;
  padding-right: 12.5rem;
  padding-left: 0.5em;
}

.sticky-menu {
  position: fixed;
  right: 0;
}

Demo on GitHub

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.