Header and footer with position:stick

https://ginpen.com/2018/01/11/header-and-footer-with-positionstick

by ginpei

HTML

<article>
  <header class="layout-header">
    <h1 class="layout-title">You Sticky Head!</h1>
  </header>
  <main class="layout-main">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, eligendi voluptate dolor neque praesentium nisi accusantium ducimus deleniti mollitia reprehenderit, aut sunt molestiae consequuntur libero perferendis vel, inventore impedit error.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita libero nemo nulla quia assumenda dignissimos perferendis, vero rem nisi eaque repellendus accusantium iste esse maiores. Saepe aspernatur, voluptatem dolorem. Ex.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita libero nemo nulla quia assumenda dignissimos perferendis, vero rem nisi eaque repellendus accusantium iste esse maiores. Saepe aspernatur, voluptatem dolorem. Ex.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita libero nemo nulla quia assumenda dignissimos perferendis, vero rem nisi eaque repellendus accusantium iste esse maiores. Saepe aspernatur, voluptatem dolorem. Ex.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita libero nemo nulla quia assumenda dignissimos perferendis, vero rem nisi eaque repellendus accusantium iste esse maiores. Saepe aspernatur, voluptatem dolorem. Ex.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita libero nemo nulla quia assumenda dignissimos perferendis, vero rem nisi eaque repellendus accusantium iste esse maiores. Saepe aspernatur, voluptatem dolorem. Ex.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita libero nemo nulla quia assumenda dignissimos perferendis, vero rem nisi eaque repellendus accusantium iste esse maiores. Saepe aspernatur, voluptatem dolorem. Ex.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita libero nemo nulla quia assumenda dignissimos perferendis, vero rem nisi eaque...

CSS

.layout-header {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  padding: 0.5rem 1rem;
  position: sticky;
  top: 0;
}

.layout-footer {
  background-color: #eee;
  bottom: 0;
  font-size: smaller;
  padding: 0.1rem 1rem;
  text-align: center;
  position: sticky;
}

/* -------- */

body {
  margin: 0
}

.layout-title {
  margin: 0;
}

.layout-main {
  margin: 1rem;
}