Fixed Header and Footer using CSS

If you want to create a header and footer part which will be fixed in their place then follow the below steps.

Place the below css in the page.
 <style type="text/css">
        #header
        {
            background: #eee;
            border: 1px solid #666;
            height: 60px;
            left: 0;
            position: fixed;
            width: 100%;
            top: 0;
            text-align: center;
        }
        #content
        {
            margin: 0 auto;
            overflow: auto;
            padding: 80px 0;
            width: 940px;
        }
        #footer
        {
            background: #eee;
            border: 1px solid #666;
            bottom: 0;
            height: 60px;
            left: 0;
            position: fixed;
            width: 100%;
            text-align: center;
        }
    </style>

Place the below content in the page.
<div id="header">
            Header Content
</div>
<div id="content">
           Text part will place here.
</div>
<div id="footer">
            Footer Content
</div>

Run the project by using F5 and see the output.