Position footer at the bottom

Question

I would like to position the footer at the bottom of the page.

For example on the page where there\'s not much content, I still need the footer at the bottom, but if

Answer 1

All previous CSS solutions requite footer height to be constant. For all proper browsers, the following solution solves the problem for dynamically changing footer height.

html { height: 100%; }

body {
    margin        : 0;
    min-height    : 100%;
    display       : flex;
    flex-direction: column;
}

body > .content { flex-grow:   1; background: ghostwhite; }
body >  footer  { flex-shrink: 1; background: gold; }

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis luctus mauris nec lacinia. Maecenas egestas, nisl sed volutpat consectetur, urna orci bibendum lorem, sit amet maximus dolor massa et mi. Duis elit neque, interdum nec euismod sed, interdum ac dui. Maecenas non ornare nibh. Vestibulum malesuada et sem quis mattis. Phasellus a justo non dolor porta faucibus sed id lectus. Nullam imperdiet, velit eu convallis ornare, ipsum augue vestibulum lectus, finibus bibendum nulla libero a augue. Aenean eleifend sapien eu placerat facilisis. Vestibulum pulvinar pretium neque, in ullamcorper orci semper nec. Donec rhoncus velit magna, eget dapibus augue cursus quis. Proin in nisi ut tortor finibus tristique vitae vel libero. Aliquam placerat diam nec consectetur tristique. Praesent bibendum diam id velit pellentesque facilisis. In quis odio nec tortor cursus commodo in eu nisl. Nullam non interdum enim, a faucibus metus. Mauris posuere erat id vestibulum eleifend.  
 {{ footer }}