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