<div id="main-container" contentEditable>
I would like to have a footer:
at the bottom of the page, even if the main-container is very short in height, e.g. only 300px high. In this case a big vertical margin should be added.
Probably of something like height(viewport) - height(main-container) - height(header)
in the normal flow of the body, after <div id="main-container">, so I don’t want to place it with position: fixed or position: absolute.
if the main-container is big (e.g. 1 page or more), then only a few margin should be added between main-container and footer (to the contrary of bullet point 1.)