Wednesday 11 April 2012

CSS Sticky Header and Footer with Scrolling Middle

This is a way to use CSS only (no JavaScript) to have the content expand to fill the window size, with the header always visible at the top and the footer always visible at the bottom.  If there's too much content, just the middle will scroll, not the whole page. You can see it in action, here.

It's not perfect, but I think it's the best you can get without JavaScript and it does work perfectly on most mobile phones, which is the reason I did it.

Before I get onto the code, I'd like to thank Ryan Fait for pointing me in the right direction, with his Sticky Footer.

The basic code is below.  I've used in-line styles to make it easier for you to see which styles are applied to which bit, but obviously you should put them into a separate stylesheet and also add fonts and change background colours etc.
<html style="height:100%;margin:0;">
<head>
<title>Scroll Demo</title>
</head>
<body style="height:100%; margin:0; padding:0;">
            <div style="height: 4em; background-color:#000000; color:#ffffff; position:relative; z-index:1;">Header Strip</div>
           <div style="height: 100%; margin: -4em 0 -2em 0; color:#000000; overflow:auto;">
              <div style="height:4em;"></div>
              <p>THIS IS WHERE THE CONTENT GOES</p>
       <div style="height:2em;"></div>
           </div>
           <div style="height: 2em; background-color:#000000; color:#ffffff; position:relative; z-index:1;">This is the footer</div>
    </body>
</html>
The important points are that you need to apply a 100% height style to the <HTML> and <BODY> tags as well as your main content div. The header and footer need to have a z-index of 1, otherwise your content will scroll over them. Your main content div needs to have an empty div that is the same height as your header at the top, and an empty div that is the same height as your footer at the bottom. Finally, you need to apply negative margins that are the same as the header and footer heights, to the top and bottom on your main content div.

There is a demo here, with the exact code written above, except for additional content to force the scroll.

The reason I wrote this was because I needed to find a way to make my HTML5apps fill the full screen, without going off of it, on all the various resolutions. I've tested my apps on iOS, Android and Symbian so far and the scrolling middle works.

7 comments:

  1. The demo isn't demoing much since there is not enough content to scroll.

    ReplyDelete
  2. If you click on the demo link, in the second paragraph from the bottom, there is enough content to scroll.

    ReplyDelete
  3. Resize the window to see the scroll.

    Is is MarVelLous! +1

    Thanks

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. This worked great. Is there a way to hide the scrollbar now?
    Thanks for your help.

    ReplyDelete
    Replies
    1. You can use overflow:hidden instead of overflow:auto to get rid of the scroll bars, but any content that doesn't fit won't be seen.

      Delete
  6. I am happy that I found your post while searching for CSS Sticky Header and Footer with Scrolling Middle. Thank you very much for sharing your thoughts.

    What is a Healthcare Website? Read here the top 11 advantages of having a website 4 your healthcare office.

    ReplyDelete