[CSS] Sticky Header and/or Footer

**dday9** · Feb 23rd, 2016, 03:15 PM

The following code will allow you to have a sticky header or footer without the need for JavaScript and without the need to know the height of the main content or the size of the screen. With the following code you can can use one or the other header/footer, or both as I have in my example:

HTML:

HTML Code:

<body>
  <header>
    <p>This is your header. Navigations and logos will typically go here.</p>
  </header>
  <main>
    <p>This is your main. This is where the content of your website begins.</p>
    <p>Content 1</p>
    <p>Content 2</p>
    <p>Content 3</p>
    <p>Content 4</p>
    <p>Content 5</p>
    <p>Content 6</p>
    <p>Content 7</p>
    <p>Content 8</p>
    <p>Content 9</p>
    <p>Content 10</p>
    <p>Content 11</p>
    <p>Content 12</p>
    <p>Content 13</p>
    <p>Content 14</p>
    <p>Content 15</p>
    <p>Content 16</p>
    <p>Content 17</p>
    <p>Content 18</p>
    <p>Content 19</p>
    <p>Content 20</p>
    <!-- Artificially making a lot of content to display how the scroll would be. -->
  </main>
  <footer>
    <p>This is your footer. Copyright and other navigation swill typically go here.</p>
  </footer>
</body>

CSS:

Code:

body {
  display: flex;
  flex-direction: column;

  max-height: 100vh;
  min-height: 100vh;
  margin: 0; /* default CSS fix */
}

main {
  flex: 1;
  flex-direction: column;

  overflow-y: scroll;
}

Fiddle: https://jsfiddle.net/3t2hcxoL/

Thread: [CSS] Sticky Header and/or Footer

Thread Tools

Display

[CSS] Sticky Header and/or Footer

Posting Permissions