How to make a fluid sticky footer

Question

I\'m looking for a solution to have a sticky footer which height may be dependent on the width of the browser.

Sticky footers in fluid designs are not all that triv

Answer 1

Welcome to the magical world of flexbox! Try this out... http://jsfiddle.net/n5BaR/

    
    
Hello World
    
Content
    

        Quisque viverra sodales sapien, in ornare lectus iaculis in. Nam dapibus, metus a volutpat scelerisque, ligula felis imperdiet ipsum, a venenatis turpis velit vel nunc. In vel pharetra nunc. Mauris vitae porta libero. Ut consectetur condimentum felis, sed mattis justo lobortis scelerisque.
    

The paddings and margins are just to be a little pretty, but the magic happens with display: flex; min-height: 100vh; flex-direction: column; and flex: 1;.

For more information and other examples, see http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

From Mozilla...

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. ... Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it.