How to make a fluid sticky footer

前端未结

关注

 2  2028

忘了有多久

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

相关标签:

2条回答

鱼传尺愫

2020-12-15 14:05
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)
发布评论:

提交评论
- 加载中...
南旧

2020-12-15 14:10
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)
发布评论:

提交评论
- 加载中...