如何制作一个粘性的页脚 | 如何制作一个粘性的页脚

本文介绍了如何制作一个粘性的页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在寻找一种解决方案，以使页脚具有粘性，其高度可能取决于浏览器的宽度.

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.

我宁愿选择一种干净的CSS解决方案，使粘性页脚在屏幕宽度变化时自动适应，而不是进行各种媒体查询和构建工作基础.

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?

推荐答案

欢迎来到 flexbox 的神奇世界！试试看... http://jsfiddle.net/n5BaR/

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>

填充物和边距看起来很漂亮，但是魔术发生在display: flex; min-height: 100vh; flex-direction: column;和flex: 1;上.

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;.

有关更多信息和其他示例，请参见 http://philipwalton .github.io/solved-by-flexbox/demos/sticky-footer/

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

来自 Mozilla ...

这篇关于如何制作一个粘性的页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！