Results 1 to 1 of 1

Thread: [CSS] Sticky Header and/or Footer

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    [CSS] Sticky Header and/or Footer

    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/
    Last edited by dday9; Feb 23rd, 2016 at 05:11 PM.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width