How to make a fluid sticky footer

Asked 3/6, 2013 at 16:43 Answered 6/12, 2013 at 19:51

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 trivial. I've found hints, discussions and solutions to implement sticky footers. However, all these are dependent on a fixed and known height of the footer. In my case, the height of the footer contains text and the number of lines is dependent on the width of the screen.

Rather than making al sorts of media queries and building some work aorund, I'm would prefer a clean CSS solution in which the sticky footer auto adapts when the width of the screen varies.

Does anyone of you have the ultimate answer?

Ossuary answered 3/6, 2013 at 16:43 Comment(3)

possible duplicate of CSS Sticky Footers with Unknown Height – Mogerly 3/6, 2013 at 16:54

Yes, the question is kind of a duplicate, but the answers are not satisfactory. Fortunately, it pointed my to another post with nice directions that suit my needs: #12606316. Thanks for looking into this. – Ossuary 3/6, 2013 at 18:32

You didn't mention that one of the elements has overflow: scroll on it. – Mogerly 3/6, 2013 at 18:39

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

<body>
    <style>
        body {
            padding: 0; margin: 0;
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }
        main {
           flex: 1;
           padding: 1em;
        }
        header, footer {
            background-color: #abc;
            padding: 1em;
        }
    </style>
    <header>Hello World</header>
    <main>Content</main>
    <footer>
        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.
    </footer>
</body>

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.

Camphor answered 6/12, 2013 at 19:51 Comment(1)

This should be a #1 answer. I dug through so many posts tonight. Gladly, I found yours! – Shreveport 24/12, 2015 at 7:51

Try something like this:

http://jsfiddle.net/6BQWE/2/

Where the height of the sticky footer is relative to the height of the container, with a percentage:

#sticky_footer {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:10%;
    background:red;
    text-align:center;
}

You may need to sort out some margin/padding for the text with media queries but the footer dimensions will be dynamic without them.

Cindelyn answered 3/6, 2013 at 17:29 Comment(0)

Recommended topics

Hot tags