How to consistently push footer at the bottom using CSS?

If an HTML page has very less content then the footer is normally seen halfway up the page leaving a blank space below it. This can look bad on a large screen. In such a scenario web designers are asked to push footers down to the bottom, but at times designers aren’t able to achieve this as they are unaware about certain CSS tricks.

How to push footer down through CSS?

Actually it’s not so complicated. This is done by using a mix of HTML and CSS.

You would only require four div structures to achieve this. The first is wrapper which covers the entire page content. The second wrapper has three divs such as header, main content and footer. That’s it, the magic happens for this only by CSS.