In some sites we want to keep the Header and Footer always visible and fixed to top and bottom of the screen respectively. In this article I will show how we can implement the sticky (or fixed) header and footer using only HTML and CSS.
To create a layout with sticky header and footer can be easily done using the CSS property position:fixed. In my example, I will be displaying a sticky header and a sticky footer.
HTML Code:
<!-- BEGIN: Sticky Header --> <div id="header_container"> <div id="header"> Header Content </div> </div> <!-- END: Sticky Header --> <!-- BEGIN: Page Content --> <div id="container"> <div id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ipsum magna, et convallis sem. Nunc pulvinar magna vitae orci malesuada blandit. Proin ac purus dui. Suspendisse venenatis egestas egestas. Sed tincidunt diam et massa convallis et mollis enim malesuada. Nullam eget metus nunc, eget imperdiet urna. Quisque vehicula ipsum non sapien vulputate convallis quis quis ligula. Aenean gravida mollis blandit. Nullam lacus tortor, viverra a auctor ac, porta eget neque. Duis placerat mi metus, a gravida quam. <br /><br /> Nam ut augue mauris, at dapibus quam. Pellentesque eu nunc enim. Proin facilisis, dolor nec sollicitudin mattis, sem velit mollis sem, sagittis sagittis libero ante id nunc. Nam congue, mauris non porttitor convallis, purus elit faucibus nunc, in mollis sem lorem eu tortor. Cras nec justo id libero fringilla placerat ac et leo. Mauris ac vehicula odio. Cras augue erat, sodales vel porttitor ut, scelerisque nec justo. Praesent vitae lorem erat. Suspendisse elementum tortor vitae diam venenatis eget fermentum lacus suscipit. Quisque varius vulputate tempus. ... </div> </div> <!-- END: Page Content --> <!-- BEGIN: Sticky Footer --> <div id="footer_container"> <div id="footer"> Footer Content </div> </div> <!-- END: Sticky Footer -->
CSS Code:
/* Reset body padding and margins */
body { margin:0; padding:0; }
/* Make Header Sticky */
#header_container { background:#eee; border:1px solid #666; height:60px; left:0; position:fixed; width:100%; top:0; }
#header{ line-height:60px; margin:0 auto; width:940px; text-align:center; }
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container { margin:0 auto; overflow:auto; padding:80px 0; width:940px; }
#content{}
/* Make Footer Sticky */
#footer_container { background:#eee; border:1px solid #666; bottom:0; height:60px; left:0; position:fixed; width:100%; }
#footer { line-height:60px; margin:0 auto; width:940px; text-align:center; }
Complete code: In this I have the CSS inside HTML file. You can move it out to external CSS file (which I think is a good idea so that browser caches it and the size of HTML file reduces).
<!DOCTYPE html>
<html>
<head>
<title>Sticky Header and Footer</title>
<style type="text/css">
/* Reset body padding and margins */
body { margin:0; padding:0; }
/* Make Header Sticky */
#header_container { background:#eee; border:1px solid #666; height:60px; left:0; position:fixed; width:100%; top:0; }
#header{ line-height:60px; margin:0 auto; width:940px; text-align:center; }
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container { margin:0 auto; overflow:auto; padding:80px 0; width:940px; }
#content{}
/* Make Footer Sticky */
#footer_container { background:#eee; border:1px solid #666; bottom:0; height:60px; left:0; position:fixed; width:100%; }
#footer { line-height:60px; margin:0 auto; width:940px; text-align:center; }
</style>
</head>
<body>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ipsum magna, et convallis sem. Nunc pulvinar magna vitae orci malesuada blandit. Proin ac purus dui. Suspendisse venenatis egestas egestas. Sed tincidunt diam et massa convallis et mollis enim malesuada. Nullam eget metus nunc, eget imperdiet urna. Quisque vehicula ipsum non sapien vulputate convallis quis quis ligula. Aenean gravida mollis blandit. Nullam lacus tortor, viverra a auctor ac, porta eget neque. Duis placerat mi metus, a gravida quam.
<br /><br />
Nam ut augue mauris, at dapibus quam. Pellentesque eu nunc enim. Proin facilisis, dolor nec sollicitudin mattis, sem velit mollis sem, sagittis sagittis libero ante id nunc. Nam congue, mauris non porttitor convallis, purus elit faucibus nunc, in mollis sem lorem eu tortor. Cras nec justo id libero fringilla placerat ac et leo. Mauris ac vehicula odio. Cras augue erat, sodales vel porttitor ut, scelerisque nec justo. Praesent vitae lorem erat. Suspendisse elementum tortor vitae diam venenatis eget fermentum lacus suscipit. Quisque varius vulputate tempus.
...
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>
I have tested this on following browsers/systems
- Internet Explorer 9 on Windows 7 Professional(64 bit)
- Internet Explorer 8 on Windows XP Professional
- Firefox 8.0.1 on Windows 7 Professional(64 bit) and Windows XP Professional
- Chrome 16 on Windows 7 Professional(64 bit) and Windows XP Professional
- Opera 11.50 on Windows XP Professional
- Safari 5.0.3 on Windows XP Professional
Pingback: Left Sidebar Page | Wordpress Hosting - SEO Friendly - NetworkCities | Wordpress Hosting - SEO Friendly - NetworkCities
great work. works perfectly
How would you edit this CSS to make the Header and Footer stick?
.sf_wrapper {
background-color: #958606;
background-image: url(uploads/crossbonesheader.jpg);
background-position: center top;
background-repeat: no-repeat;
border: 8px solid #000000;
.sf_header_wrapper{
width: 900px;
height: 250px;
}
.sf_outer_wrapper {
width: 900px;
}
.sf_navigation {
width: 900px;
}
.sf_navigation ul li {
text-align: center;
width: 16.4% !important;
}
Hi Luke,
Can you provide the HTML structure for the page? Looking at the CSS it looks like it is only for a page wrapper, header and menu. If you have a link to your page, or can send me the code or put it in a jsfiddle, I can take a look at it.
The only other code I have is this. This is a godaddy.com template so I am not sure where to get the html
/*********************************************************
**********************************************************
Folder: Theme207
Name: Shreded
Cat: Sports
**********************************************************
*********************************************************/
/*————————————
GENERAL
————————————*/
body {
color:#000000;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.sf_outer_wrapper {
width: 900px;
margin: 0 auto;
}
.sf_wrapper{
width: 900px;
}
a:link {
color:#000;
}
a:visited {
color:#000;
}
a:hover {
color:#000;
}
/*————————————
HEADER
————————————*/
.sf_header_wrapper{
margin-left: 544px;
height: 250px;
}
.sf_main_header{
text-align: center;
padding-top: 100px;
font-size: 20px;
font-weight: bold;
height: 40px;
overflow: hidden;
}
.sf_sub_header{
text-align: center;
font-size: 11px;
font-weight: bold;
height: 30px;
overflow: hidden;
}
.sf_sub_header p,
.sf_main_header p{
margin: 0;
padding: 0;
}
/*————————————
NAVIGATION
————————————*/
.sf_navigation_top {
display: none;
}
.sf_subnavigation, .sf_subnavigation2 {
display:none;
}
.sf_navigation {
height: 35px;
height: auto !important;
width: 900px;
background-image:url(images/nav_bgb.jpg);
background-repeat:repeat;
background-position:0 0;
}
.sf_navigation ul {
display: block;
clear: both;
list-style-type: none;
margin:0;
padding: 0;
}
.sf_navigation ul:after,
.sf_navigation:after {
content: “.”;
display: block;
visibility: hidden;
height: 0;
font-size: 1px;
clear: both;
}
.sf_navigation ul li{
float: left;
white-space:nowrap;
font-size:10px;
font-weight: bold;
}
.sf_navigation ul{
margin:0;
height: auto !important;
height: 1%;
}
.sf_navigation ul li a{
padding: 7px 12px 0px 12px;
display: block;
height: 20px;
width: auto !important;
width: 5px;
text-decoration: none;
}
.sf_navigation ul li a:hover{
background-image:url(images/roll_over_nav.jpg);
background-repeat:no-repeat;
background-position: 0 -5px;
}
#Nav1,
#Nav1 ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#Nav1 a {
display:block;
}
#Nav1 li { /* all list items */
float: left;
}
#Nav1 li ul { /* second-level lists */
position: absolute;
width: 160px;
left: -999em;
z-index: 1000;
background-color: #525252;
}
#Nav1 li ul li { /* second-level lists */
width: 160px;
margin: 0px;
}
#Nav1 li ul li a { /* second-level lists */
width: 160px;
padding: 7px 0px 0px 3px;
margin: 0px;
height: 20px;
}
#Nav1 li ul li a:hover { /* second-level lists */
background-color: #313332;
background-image: none;
}
#Nav1 li:hover ul,
#Nav1 li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#Nav1 iframe {
position: absolute;
/* account for the border */
left: -0.25em;
top: -0.25em;
z-index: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
margin-left: 3px;
}
/*————————————
CONTENT
————————————*/
.sf_pagetitle{
font-size: 11px;
font-weight: bold;
text-align:right;
height: auto !important;
height: 40px;
min-height: 40px;
padding: 30px 20px 0px 0px;
}
.sf_pagetitle h1 {
font-size: 11px;
font-weight: bold;
margin:0px;
}
.sf_content{
width: 860px;
padding: 0 20px;
font-size: 12px;
margin-bottom: 50px;
}
.sf_content:after{
content: “.”;
display: block;
visibility: hidden;
height: 0;
font-size: 1px;
clear: both;
}
/*————————————
FOOTER
————————————*/
.sf_footer{
font-size: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding: 2px 0px 12px 50px;
width: 850px
line-height: 18px;
}
.sf_footer p{
margin: 10px 0 0;
padding: 0;
}
/*————————————
BANNER
————————————*/
.sf_banner{
color:#000;
margin-bottom: 35px;
padding-top: 80px;
text-align: center;
font-size: .8em;
}
.sf_banner div#bannerLink{
padding-top: 10px;
}
.sf_banner a{
color:#000;
}
.sf_banner a:visited{
color:#000;
}
.sf_banner a:hover{
color:#000;
}
/**
* Sticking flyout menu bug
*
* @bugfix
* @affected ie7
* @css-for ie7
* @valid yes
*/
#Nav1 li:hover, #Nav1 li.hover {
position: static;
}
Do you have the link to the page? Without the HTML it is not possible to know the structure of the page which is needed to complete the task.
I see, it is not published yet. Is there a way for you to access an unpublished page?
Can you save your page as complete webpage and send it to me through my contact page?
crossbonesllc.com is the site. I just published it and the header image is not showing once published
I see the site. The header image is not showing because it does not exists at the location http://crossbonesllc.com/uploads/crossbonesheader.jpg
Make sure it is in your uploads directory. Also, can you tell me what do you want to make sticky?
It is in my uploads as far as being in my photo gallery in my dashboard. I would like for the header and footer to always be visible so that when I scroll they stay in place. I will check the image to see what is going on there but I uploaded it using their upload option.
Got the header image to show up, now to make it sticky “fixed”. I would also like to make the nav span the width of the container. I really appreciate your help
Hi Luke,
Do you need the header image as well as the nav to be fixed on the top. If you need this then we will need to change the HTML code of your page. Also, what part of the footer do you need to make sticky?
Also, a suggestion, if you make the header image and the nav sticky, there will be very less space on the page, and hence very less content can be viewed at any time. Hence, I would not suggest making the header image to be sticky. You can probably have only nav be sticky which can stick at the top of the page when the user scrolls the page.
Gotcha, well in that case it may be a better idea to not have it be sticky. I just really like the look. At this point I am going to focus on structuring the content and adding my images. Is there a way to make the nav bar fill the width of the page?
Thank you again for your help and I would love to stay in contact on here as I progress because this is the first site I have built and you have been quite helpful.
Sure we can be in contact. You can contact me through the contact page on my site in you need any help.
It would be nice to make them react like the links on this site magpul.com
Thanks… Great code
But when you minimize the screen the footer & header is a total disaster.
I am not sure what you mean by total disaster. Can you please explain and also provide an example?
It looks great and you should also add that it works on Ipad as well : ) Hopefully I will be able to integrate the footer code to the page I am setting up (I don’t need the header). I have only used the sticky footer from http://www.cssstickyfooter.com/ – and it doesn’t stick/scroll when the input in the textfield is larger than the browser window…
Hi again! Trying to combine the sticky footer with two absolute positioned backgrounds on the page I am setting up (they need to stick outside the browserwindow so that when the screen is larger, they sort of expand) – see the link: http://www.74118.websys.sysedata.no/index_scroll.html
However, I keep getting the horisontal scrollbar no matter where i put overflow:hidden… Do you have a solution?
The Horizontal scrollbar on your page appears because you have width of the the div with id “menybakgrunn” as 2109px. You need to reduce the width of that div. In case you have more issues/questions you can contact me through my contact page and I will try to help you.
I know that it is very long – because it shall expand and show even if the browser window gets larger.. It worked earlier with the other sticky footer, but the page didn’t scroll behind the footer. The background had then overflow-x:hidden..
This is exactly what I was looking for, thank you very much. My pages are made with PHP, how can I adapt the HTML code to fit the PHP pages? any easy solution for this?
You can easily use HTML and CSS codes in your PHP pages. You must be using or generating some HTML output for your page, just use this code in the same way as you are outputting your pages.
This looks fantastic. Thanks a lot for the code. I’ve been browsing around for well functioning sticky code and this seems to do the job 😀 THANKS again.
Thanks Luke, great job well done.
Another great article! Thanks for posting it.
I’ve been trying to incorporate the information from this post into a three column fixed/fluid/fixed type layout. The problem I’m running into is that in order to make the three column work, I have to use absolute positioning but then that messes up the scrolling as the content in the 3 columns scrolls up into the header. Have you worked with three column fixed/fluid/fixed layouts before that have the sticky header/footer?
Hi Richard,
I have not worked with three column layouts having sticky header/footer, however, I can surely try to help you out. If you can send me the code or demo, I can take a look with you.
Virendra,
Nice article for Sticky Header & Footer, if my page content exeeds to more than one page, the content disappear in both pages. What changes are required in the above code?
Thanks in Advance
Suresh
thanks so much 🙂
this is awesome!!!!
Thank you! 😀
Thank you.
Still, When my top navigation menu links call different pages (that I want to appear in the container) – they replace the whole browser window, ignore css and not targeted to the container. How do I get all pages to always target in the container?
Hi Mor,
I am not very sure what you are trying to do. It seems you are trying to implement frames functionality.
Hi Virendra.
I thought the way to achieve what I need has to use iframes, but I was hoping with your post above I could do without.
I want that links on the site (such as from top navigation menu) will render the called pages in the content area – located below the header and the top navigation – while the other sections remain intact (or static).
Thanks!
In the meantime, I found another technique to do that.
I’m including the called page based on a GET parameter that I pass with the links, in between the header and the footer that are always rendered in place. I maintain the called file names mapping to page codes in an array.
I am not very sure what you are trying to achieve, but it seems you want the same header, navigation and footer on all pages. I would use a template file for each section and include it in every page. This way you would have to write the code just once and you can use in every page and also you can have a different URL for each page.
Thanks a lot Sir. We used it at our portal http://www.oshopindia.com and it is working absolutely fine.
Thanks
Oshopindia Team
Thanks for this. However, is it possible to use same page anchors using this method? That is, keep the stickied header/footer, add in some links in the header that scroll the content area to the anchor id? When I try this, it scrolls the page too far up…behind the header area. Have messed around with top-margin in the content, but that messes up the page.
… yes, that’s a problem. But this workaround would maybe a solution (or vice versa…)
$(function() {
if (goAnker = window.location.hash) {
$(‘html, body’).animate({
scrollTop: $(goAnker).offset().top – 90
}, 800);
}
});
It’d be nice if ONE GUY would actually explain this stuff, instead of just show off how much they know. Posting a shitload of code doesn’t tell me how to adapt and implement it with my own site.
Hi BKA,
Can you please ask what you don’t understand? I have lot of comments in the code so that it is easier to understand.
Hey BKA… It would perhaps be nicer if ONE GUY (you) were a litlle more polite, grateful and gracious.
Virenda is generous enough to share his work with us, you could at least be generous enough to accept it graciously. If there is any lack here, it is by you not making the effort to learn what it is all about and not for others to hold your ungrateful hand!
Nice post. Much appreciated. I was looking everywhere for some basic info on how to create a sticky header and footer. Most of what I found was convoluted. I was able to take your code and with a little tweeking made a sticky header and footer for my custom WordPress theme.
it’s also possible put color in that scrollbar?
scrollbar-3dlight-color:blue;
scrollbar-arrow-color:chartreuse;
scrollbar-base-color:magenta;
scrollbar-darkshadow-color:;
scrollbar-face-color:;
scrollbar-highlight-color:;
scrollbar-shadow-color:
Great article.Nicely explained. Thanks Viredra for the post.
where exactly do you have to put the HTML code? I mean, in the header section or…
Awesome simple clear example for how to achieve fixed header/footer sections.
This is probably asking too much but do you think it is possible to do this plus have the fixed header and/or footer repeat on every page when printing?
I have a table with a header and 9 columns and the table can be quite long. My goal is to come up with an HTML page that has the fixed header and that repeats the header on every page for printing. Also trying to repeat a footer with file name and page numbering.
Any help is greatly appreciated.
Thank you.
Hi Scott,
I am not aware of any such method. You might have to take a look into print style sheets. Using style sheets for printing you can change how pages are printed. However I am not sure even with print style sheet you will be able to do what you are trying. I see if I can find anything. Let me know if you find a solution.
I actually have it working in Firefox, without the page numbering. Nowhere near working in IE though. This is for a report that our software generates and is displayed in the application’s window as an HTML file.
I’ll let you know if I come up with a solution.
Thank you for responding so quickly.
Thanks a lot for the post, an awesome piece of work!
I have just one question, is it possible to make a header and footer with a fixed width sticky? And if so, how?
Thanks!
Thanks alot, very helpful 🙂
yes, it works in my desktop computer but have you tested on android web browsers?
thanks for your work
I tried manipulating on jsfiddle to include form inputs. The inputs can be accessed by the keyboard, but if they are located at the end of the content, it won’t scroll up so the input is viewable above the fixed footer. How can I solve this so the last input (if it’s at the bottom/end of the content) automatically scrolls up above the line and can be seen (viewable) above the top of the footer? Hope that was clear enough. Thanks in advance!
Thanks, it works perfectly if you only print a page. But, how do you do if you need to print more than one page??
When I try to print more than one page, headers and footers overlaps with the page content.
Awesome code. Thanks!!!
great! it works perfectly. thanks
My question is why you provide
Footer Content
footer_container and footer , i think there will be more another way to make footer and header is fixed, i gont know why the way you make it is repeatation i guess
Any way big thanks 😀
You don’t need footer and header divs to make them fixed. They are just there so that it is easier to identify what will be the container and what the content will be.
and again how about if header has margin top:100px ?
it will need z-index,to make paragraf content hide when user scroll to the bottom 😀
Again big thanks 😀