Learning Report 3


Keeping the Footer at the bottom of the page


I have been trying to figure out how to make my footer stay at the bottom of the page, and found out that this is a common issue that people run into. The best information I found, and my search reffered to the same article several times, was from "The Man in Blue" forums, which I linked below in my sources.

The technique requires adding an addition "container" div that all the other sections such as the heading, navigation, and content are inside of. The html, body, and container selectors in your css are all set to height:100%, and then a bottom padding the height of the footer is added to the content. Then the footer is set with a negative top margin the height of the footer.

Example

I used the coding that I came accross in my page, and it does seem to keep the footer at the bottom of the page, but in my browser, I have to scroll down to get to the bottom. You can see the code at work on this page and my homepage.

Sources

The man in blue forums