How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?

Question

I haven\'t added content to my page yet, since I\'m still working on the header and footer. I noticed that my footer, instead of being at the bottom of the page, like it would b

Answer 1

I had the same problem a few weeks ago with the website I am working on and after a little bit of searching and trial and error work I managed to find the resolution to this problem.

I have here the code as it is a little bit hard to explain:

HTML:

    some header



    

    
    
some content
    
    
some more
and more
and more
and more
and more
and more
and more
and more
and more
and more
and more
and more
and more
and more
and more
and more
and more
and more
and more
and more
and more
and more
and more
and more
and more
and more content


    © some footer

CSS:

html,
body {
    margin: 0;
    min-height: 100%;
    position: absolute;
    width: 100%;
}

header,
footer {
    background: red;
    color: white;
    position: absolute;
    text-align: center;
    width: 100%;
}

section {
    margin: 1.3em 0;
}

#little-content {
    display: none;
}

#lotsa-content {
    display: none;
}

footer {
    bottom: 0;
}

Here is a JSFiddle I made for you.

I hope this helps.

EDIT1:

To be more specific in answering your question: you have to make position the parent of the footer (that I guess it's the body) absolute and give it a min-height of 100% (also for its width), the same positioning for the footer (position: absolute;) and also to stick it to the bottom with bottom: 0; and the last thing is to give a bottom margin of the footers height so that it doesn't overlap (I also gave a top margin due the fact that I made the header absolute as well).

EDIT2:

Here is the JSFiddle example with the code you provided.