fixed-header-scrolling-container

by Nic Fontaine

HTML

<header></header>
<main tabindex="-1" id="main">
  <h2 style="margin-top: 0;">Fixed header, scrolling main</h2>
  <p>&bull; Header is <b>position: fixed</b> top, with a fixed height</p>
  <p>&bull; Main is <b>position: absolute</b>, pushed down the same distance as the header height</p>
  <p>&bull; Main has <b>tabindex="-1"</b>, and <b>.focus()</b> event on load to maintain scrollability</p>
  <hr>
  
  <button>
  Button
  </button>

<p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer cursus porttitor eros facilisis pretium. Curabitur tempor mi ac congue efficitur. Donec interdum justo vel turpis molestie, a finibus enim consequat. Proin pellentesque nisi vitae lectus iaculis condimentum.</p>

<p>Sed interdum id turpis at placerat. Quisque a enim et odio luctus tincidunt. Maecenas vel massa ligula. Quisque diam libero, dictum vel consequat vitae, pretium nec urna. Proin fermentum, orci vitae porta rutrum, massa sem facilisis sapien, vel suscipit est nunc quis odio. Duis egestas, orci ac tristique egestas, lectus ex finibus nibh, quis fermentum magna diam fermentum diam.</p>

<p>Ut pretium elit posuere ex laoreet, in fermentum quam ornare. Aliquam in volutpat massa, eget ultrices risus. Duis cursus erat facilisis aliquet consequat. Fusce at elit egestas, lacinia enim consectetur, vehicula velit. Pellentesque mollis nisi et velit placerat egestas. Nunc in auctor orci. Mauris id rutrum nibh, vel mattis velit.</p>

<p>Etiam interdum vulputate facilisis. Pellentesque vel lobortis magna, eu dictum magna. Curabitur erat justo, rutrum vel feugiat eu, semper eget erat. Cras eget ornare velit. Phasellus vitae diam eget justo dignissim dignissim. Praesent sed rutrum justo.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas finibus mauris eu gravida. Nunc convallis eget tellus a auctor. Nam ultricies ex ut nunc ultricies, eget porttitor est malesuada. Class aptent taciti sociosqu ad litora torquent...

CSS

html {
  font-family: sans-serif;
}

body {
  margin: 0;
  /* overflow-y: hidden; */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

header {
  background: #D940BC  ;
  height: 80px;
  position: fixed;
  right: 0;
  left: 0;
}

main {
  top: 80px;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  padding: 2rem;
}

main:focus {
  outline: none;
}

JavaScript

window.addEventListener("load", function() {
        document.getElementById("main").focus()
      })
    </script>