How to make a fluid sticky footer

2019-01-23 09:18发布

站内问答 / HTML/CSS
1716 2 6

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?

2条回答
甜甜的少女心
2楼-- · 2019-01-23 09:38

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.

查看更多
0人赞 添加讨论(0) 举报
ゆ 、 Hurt°
3楼-- · 2019-01-23 09:48

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)