Sticky Header and Footer using 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;
        }  

HTML Part

<!DOCTYPE html>
<html>
<head>
    <title>Sticky Header and Footer</title>
    <style type="text/css">
    
    </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">
            ...
            body content 
            ...
        </div>
    </div>
    <!-- END: Page Content -->
    <!-- BEGIN: Sticky Footer -->
    <div id="footer_container">
        <div id="footer">
            Footer Content
        </div>
    </div>
    <!-- END: Sticky Footer -->
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s