How to stick element at the bottom of the page (HTML5 and CSS3)?

Question

When I use position relative with no content, footer goes up, with absolute with a lot of content, the footer goes down, and with f

Answer 1

just set position: fixed to the footer element (instead of relative)

Jsbin example

Note that you may need to also set a margin-bottom to the main element at least equal to the height of the footer element (e.g. margin-bottom: 1.5em;) otherwise, in some circustances, the bottom area of the main content could be partially overlapped by your footer