cross browser sticky header and footer using css

No doubt, Header and footer both are the most important part of any site. Those contain the website primary information and useful links. Usually, web designer and developers let those sections visible, while visitors scroll the page. So, today we are going to learn how to create a cross browser supported sticky header and footer using only the CSS. Lets get started.

CSS has a useful property position:fixed and using this, we can easily keep any content sticky in the web layout. Modern CSS frameworks like boostrap provides built-in css classes and we can use them to achieve the same result. However, if you are at the learning stage and do not to use any  framework, than you can create your own sticky header and footer layout by following this scripts.

– HTML code For sticky header and footer:

<div id="header-container">
    <div id="header"> Logo of coolajax.net </div>
</div>
<div id="container">
    <div id="content">
        <h3>Sticky Header and Footer! </h3>
        <p>No doubt, Header and footer both are most</p>
    </div>
</div>
<div id="footer-container">
    <div id="footer"> copyright © www.coolajax.net 2009-2012 </div>
</div>

– CSS code For sticky header and footer:

body {
    margin: 0;
    padding: 0;
    font-family: verdana;
    font-size: 11px;
}

p {
    line-height: 1.8em;
}

#header-container {
    background: white;
    border-bottom: 2px solid blueviolet;
    height: 130px;
    left: 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

#header {
    line-height: 130px;
    margin: 0 auto;
    width: 1020px;
    text-align: center;
}

#container {
    margin: 0 auto;
    overflow: auto;
    padding: 130px 0;
    width: 940px;
}

#footer-container {
    background: lightgoldenrodyellow;
    border-top: 2px solid green;
    bottom: 0;
    height: 60px;
    left: 0;
    position: fixed;
    width: 100%;
}

#footer {
    line-height: 60px;
    margin: 0 auto;
    width: 1020px;
    text-align: center;
}

– Demo:

Live demo

– Download:

Download Now

Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!