I am currently developing a small web application for the department I am working at. Everything was looking good until I ran into a problem with the layout last week. It bugged me that the footer was placed directly after the content. It just looked wrong. So I googeled to find a way to have a non-fixed footer that stays at the bottom of the window as long as there is enough space. If the windows is to small the footer should be bedhin the content (so you have to scroll down in order to reach the footer).
Usually an easy task. Set the body width to 100%, add an negative margin, which is the same height as the footer should be and you’re done. In my case there was a little detail that smashed my approach: The layout has an fixed header navigation plus a top padding of the body so that the beginning of the content is not hidden beneath the navigation.
Read on to find a (hopefully good) solution to fix that.
Read more