CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

Question

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

I wa

Answer 1

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

HTML

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.

CSS

.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 and 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 doesn't involve making big changes to the whole document.