CSS to make HTML page footer stay at bottom of the page with a minimum height

  • Added:
  • |
  • In: Wordpress

I had the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that has a footer that I can't make sit at the bottom of the page.

The CSS is inherited and befuddles me; I can't seem to change it properly to put a minimum height on the content or make the footer go to the bottom.

This Question Has 16 Answeres | Orginal Question | Caveatrob

One thing to be wary of is mobile devices, since they implement the idea of the viewport in an 'unusual' way:


As such, using position: fixed; (as i've seen recommended in other places) usually isn't the way to go. Of course, it depends upon the exact behaviour you're after.

What I've used, and has worked well on desktop and mobile, is:

<body> <div id="footer"></div> </body> 


body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 0; margin: 0; } #footer { position: absolute; bottom: 0; } 

Just set the html, body, and the other rows except the footer to 100%. e.g

<body> <header></header> <content></content> <footer></footer> 

the css becomes

html, body, header, content{ height:100%; } 

You can use http://ryanfait.com/sticky-footer/ , I have used in my many projects and never got any single issue :)

for your reference, Code are in snippet

* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */ height: 100%; margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */ background:green; } .footer, .push { height: 50px; /* .push must be the same height as .footer */ } .footer{ background:gold; }
<html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <div class="wrapper"> Content Area </div> <div class="push"> </div> <div class="footer"> Footer Area </div> </body> </html>

A simple solution that i use, works from IE8+

Give min-height:100% on html so that if content is less then still page takes full view-port height and footer sticks at bottom of page. When content increases the footer shifts down with content and keep sticking to bottom.

JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/


html{ position:relative; min-height: 100%; } /*Normalize html and body elements,this style is just good to have*/ html,body{ margin:0; padding:0; } .pageContentWrapper{ margin-bottom:100px;/* Height of footer*/ } .footer{ position: absolute; bottom: 0; left: 0; right: 0; height:100px; background:#ccc; } 


 <html> <body> <div class="pageContentWrapper"> <!-- All the page content goes here--> </div> <div class="footer"> </div> </body> </html> 

My jquery method, this one puts the footer at the bottom of the page if the page content is less than the window height, or just puts the footer after the content otherwise:

Also, keeping the code in it's own enclosure before other code will reduce the time it takes to reposition the footer.

(function() { $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed"); })(); 

Yet, another really simple solution is this one:

html, body { height: 100%; width: 100%; margin: 0; display: table; } footer { background-color: grey; display: table-row; height: 0; } 


The trick is to use a display:table for the whole document and display:table-row with height:0 for the footer.

Since the footer is the only body child that has a display as table-row, it is rendered at the bottom of the page.

I know this is old but one "hack" I've used when the footer falls under a float div like the image below is to use an empty table with a width of 100% at the bottom of the page.

enter image description here

 <div id="body"> <div style="float:left; height: 100px;">Nav<br />linka<br />linkb</div> <div id="content">content</div> </div> <table width="100%"><tr><td></td></tr></table> <div id="footer">Footer</div> 

I've developed quite an easy method to stick the Footer at the bottom, but as most common methods, you will need to tweak it to fit your Footer's height.


HTML (basic common markup)

html, body{ height:100%; margin:0; } header{ height:50px; background:lightcyan; } footer{ background:PapayaWhip; } /* Trick: */ body { position: relative; } body:after { content: ''; display: block; height: 50px; /* Set same as footer's height */ } footer { position: absolute; bottom: 0; width: 100%; height: 50px; }
<body> <header>Header</header> <article>Content</article> <footer>Footer</footer> </body>

Using flexbox

html, body{ height:100%; margin:0; } header{ height:50px; background:lightcyan; } footer{ height:50px; background:PapayaWhip; } /* Trick */ body{ display:flex; flex-direction:column; } footer{ margin-top:auto; } 
<body> <header>Header</header> <article>Content</article> <footer>Footer</footer> </body>

This is how i solved the same issue


 <div class="demo"> <h1>CSS “Always on the bottom” Footer</h1> <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p> <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p> <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p> <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p> </div> <div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div> 


html { height: 100%; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { position: relative; margin: 0; padding-bottom: 6rem; min-height: 100%; font-family: "Helvetica Neue", Arial, sans-serif; } .demo { margin: 0 auto; padding-top: 64px; max-width: 640px; width: 94%; } .footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } 

Make the body 100% of your page, with a min-height of 100% too.

The footer is then given negative margin-top:

#footer { clear: both; position: relative; z-index: 10; height: 3em; margin-top: -3em; } 

This is known as a sticky footer. A google search for it comes up with a lot of results. A CSS Sticky Footer is the one I've used successfully. But there are more.

From IE7 onwards you can simply use

#footer { position:fixed; bottom:0; } 

See caniuse for support.

I've used this to stick my footer to the bottom and it worked for me:


<body> <div class="allButFooter"> <!-- Your page's content goes here, including header, nav, aside, everything --> </div> <footer> <!-- Footer content --> </footer> </body> 

That's the only modification you have to do in the HTML, add that div with the "allButFooter" class. I did it with all the pages, those that were so short, I knew the footer wouldn't stick to the bottom, and also pages long enough that I already knew I had to scroll. I did this, so I could see that it works ok in the case that a page's content is dynamic.


.allButFooter { min-height: calc(100vh - 40px); } 

The "allButFooter" class has a min-height value that depends on the viewport's height (100vh means 100% of the viewport height) and the footer's height, that I already knew was 40px.

That's all I did, and it worked perfectly for me. I haven't tried it in every browser, just Firefox, Chrome and Edge, and the results were as I wanted. The footer sticks to the bottom, and you don't have to mess with z-index, position, or any other properties. The position of every element in my document was the default position, I didn't change it to absolute or fixed or anything.

Working with responsive design

Here's something I would like to clear out. This solution, with the same Footer that was 40px high didn't work as I expected when I was working in a responsive design using Twitter-Bootstrap. I had to modify the value I was substracting in the function:

.allButFooter { min-height: calc(100vh - 95px); } 

This is probably because Twitter-Bootstrap comes with its own margins an paddings, so that's why I had to adjust that value.

I hope this is of some use for you guys! At least, it's a simple solution to try, and it doesnt't involve making big changes to the whole document.

A very simple approach which works great cross browser is this:



<div id="container"> <div id="header"></div> <div id="body"></div> <div id="footer"></div> </div> 


html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; } 

here is my two cents. In comparisson to other solutions, one does not need to add extra containers. Therefor this solution is a bit more elegant. Beneath the code example i'll explain why this works.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <style> html { height:100%; } body { min-height:100%; padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/ margin:0; /*see above comment*/ } body { position:relative; padding-bottom:60px; /* Same height as the footer. */ } footer { position:absolute; bottom:0px; height: 60px; background-color: red; } </style> </head> <body> <header>header</header> <footer>footer</footer> </body> </html> 

So the first thing we do, is make the biggest container( html ) 100%. The html page is as big as the page itself. Next we set the body height, it can be bigger than the 100% of the html tag, but it should at least be as big, therefore we use min-height 100%.

We also make the body relative. Relative means you can move the block element around relative from its original position. We don't use that here though. Because relative has a second use. Any absolute element is either absolute to the root (html) or to the first relative parent/grandparent. That's what we want, we want the footer to be absolute, relative to the body, namely the bottom.

The last step is to set the footer to absolute and bottom:0, which moves it to the bottom of the first parent/grandparent that is relative ( body ofcourse ).

Now we still have one problem to fix, when we fill the complete page, the content goes beneath the footer. Why? well, because the footer is no longer inside the "html flow", because it is absolute. So how do we fix this? We will add padding-bottom to the body. This makes sure the body is actually bigger than it's content.

I hope i made a lot clear for you guys.

I have myself been looking into this problem. I have seen quite a few solutions and each of them had issues, often involving some magic numbers.

So using best practices from various sources I came up with this solution:


The thing I wanted to achieve specifically here was to get the main content to scroll between footer and header inside green area.

here is a simple css:

html, body { height: 100%; margin: 0; padding: 0; } header { height: 4em; background-color: red; position: relative; z-index: 1; } .content { background: white; position: absolute; top: 5em; bottom: 5em; overflow: auto; } .contentinner { } .container { height: 100%; margin: -4em 0 -2em 0; background: green; position: relative; overflow: auto; } footer { height: 2em; position: relative; z-index: 1; background-color: yellow; } 

I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

Connect Social With PHPAns