Ojambo

CSS Sticky Footer

Written by

Edward

in

On 2 min, 58 sec read

Keep Footer On Bottom

Several methods exist for keeping the footer content on the bottom. Some use JavaScript or server-side programming. CSS can be used to position the footer on the bottom.

All methods for keeping the footer on the bottom need to know the specific height of the page. CSS can utilize absolute positioning, but a simpler method exists using negative margins.

This tutorial uses the HTML and CSS height function. The CSS height property is used to keep the footer on the bottom.

    Tools are required:

  • Text editor.
  • HTML.
  • CSS.

  • Browser to view output.

Optional Download and install suitable text editor

Any text editor with regular expression support will work. To select a reviewed lightweight programming editor read the Ojambo.com Lightweight Programming Editors.

CSS-Sticky-Footer.html file




<!--
  CSS-Sticky-Footer.html.html
  
  Copyright 2011 Edward <http://ojambo.com>
  
  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  
  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.
  
  You should have received a copy of the GNU General Public License
  along with this program; if not, write to the Free Software
  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
  MA 02110-1301, USA.
        
        
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Ojambo.com Sticky Footer Demo</title>
	<style type="text/css">
		html, body { height: 100%; }
		div#main-content { height: 100%; margin-bottom:-70px;}
		div#footer {height: 70px; }
	</style>
</head>

<body>
	<div id="main-content">
		<h1>Ojambo.com Sticky Footer Demo</h1>
	</div>
	<div class="footer">
		<h2>Footer Stays On Bottom</h2>
	</div>	
</body>

</html>

The CSS used an internal style sheet inside the head tags. The body and the main content have heights of 100%. Use the footer height as the margin-bottom negative height.

How to Use:

Run the CSS-Change-Text.html file in your favourite browser.
Hover over the text to see the new (hidden) text.

Demonstration:

Ojambo.com CSS Sticky Footer Tutorial

Image Missing
Ojambo.com CSS Sticky Footer Tutorial

Conclusion:

CSS can be used to position the footer on the bottom of the page. The body of the page and the main content must have the same height. It works by giving the main content a negative vertical margin that equals the footer height.

    Recommendations:

  1. Use CSS to eliminate the need to run server-side code.
  2. Use CSS to eliminate the need to run JavaScript code.
  3. Do not assume users want or have enable JavaScript.

🚀 Recommended Resources

Disclosure: Some of the links above are referral links. I may earn a commission if you make a purchase at no extra cost to you.

About Edward

Edward is a software engineer, author, and designer dedicated to providing the actionable blueprints and real-world tools needed to navigate a shifting economic landscape.

With a provocative focus on the evolution of technology—boldly declaring that “programming is dead”—Edward’s latest work, The Recession Business Blueprint, serves as a strategic guide for modern entrepreneurship. His bibliography also includes Mastering Blender Python API and The Algorithmic Serpent.

Beyond the page, Edward produces open-source tool review videos and provides practical resources for the “build it yourself” movement.

📚 Explore His Books – Visit the Book Shop to grab your copies today.

💼 Need Support? – Learn more about Services and the ways to benefit from his expertise.

🔨 Build it Yourself – Download Free Plans for Backyard Structures, Small Living, and Woodworking.

View all posts | Website

Comments

One response to “CSS Sticky Footer”

More posts