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