How to make a fluid sticky footer

问题

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?

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/16901707/how-to-make-a-fluid-sticky-footer

标签

css

fluid-layout

sticky-footer