How to Keep a Footer Fixed Even While Scrolling

A footer section is very handy to have on your web pages to hold hyperlinks, social icons, navigational shortcuts, etc. In some cases you may want the footer to appear at the very bottom of the browser window. In addition, if the page has more content than fits in the window, you will want to allow the user to scroll down the page, but have the footer remain in a fixed position. This is easy to accomplish with just a few lines of CSS.

Example

In this example, we have a page with a typical header, main content, and footer section. Our main content section may content that does not fit in the user's browser display. If it does not, the scroll bars should be visible. We want the footer to remain at the bottom of the user's screen at all times.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
</head>
<body>
    <div id="header">My Website</div>
    <div id="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
            et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
            aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
            dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
            officia deserunt mollit anim id est laborum.</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
            rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt 
            explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia 
            consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
        <p>Vestibulum nec lectus at felis mattis tempus. Integer at neque dolor, vitae accumsan urna. Duis in quam
            eu diam pulvinar feugiat quis non velit. Nam cursus ornare arcu non varius! Proin placerat erat sit amet
            cursus cursus! Mauris porttitor eleifend felis, at sagittis leo tempor volutpat. Vestibulum ante ipsum
            in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla dui leo, rutrum tincidunt posuere non,
            fringilla quis enim.</p>
        <p>Vestibulum aliquet augue in erat iaculis posuere? Etiam rutrum tempus turpis interdum placerat. Curabitur
            ante mi; rhoncus quis aliquam et, accumsan vel enim. Vestibulum neque arcu; feugiat ut ultricies sed, 
            nec ipsum. Integer odio augue, ullamcorper sed vestibulum ut, vestibulum quis felis. Donec at justo nulla.
            Pellentesque in dolor libero, id commodo ante? Sed varius ullamcorper euismod. Phasellus ut pretium urna. 
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur vel nunc.
            Donec fermentum egestas eros, nec gravida nibh condimentum ullamcorper. Vestibulum tincidunt aliquam dui; 
            euismod erat gravida at. Nam augue leo, molestie vel luctus ac, luctus aliquam nisl. Nullam auctor mollis 
            sit amet aliquet. Sed eget semper purus.</p>
    </div>
    <div id="footer">Footer</div>
</body>
</html>

CSS

We just need a few lines of CSS to make the footer remain fixed at the bottom of the screen. We simply need to apply a fixed position and set that position to 0 pixels from the bottom. Set the width and some other CSS properties to customize the look of the footer.

#footer {
background-color:#DADADA;
height:50px;
padding:10px;
border-top:1px solid #ABABAB;
position:fixed;
left:0;
bottom:0;
width:100%
}

For our example, Here is the CSS that is used to style not only the footer, but the rest of the elements in our web page. You can click on the link below to see an online demo

body {
margin:0;
padding:0;
font-size:1.5em;
background-color:#CCD9FF
}

#header {
background-color:#DADADA;
height:40px;
padding:20px;
font-size:1.5em;
border-bottom:1px solid #ABABAB;
}

#main {
padding:15px;
margin-bottom:60px;
}

#footer {
background-color:#DADADA;
height:50px;
padding:10px;
border-top:1px solid #ABABAB;
position:fixed;
left:0;
bottom:0;
width:100%
}

As you can see in this figure, the footer is pushed to the bottom of the window. Notice the scroll bar on the right side of the image. There is additional content in the main div to be displayed. The footer will remain in its fixed position while the user scrolls down. Click on the Demo icon just above to see an online demonstration.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources