Question

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

流畅设计中的粘性页脚并非完全无足轻重。我发现了实现粘性页脚的提示，讨论和解决方案。但是，所有这些都取决于页脚的固定和已知高度。在我的例子中，页脚的高度包含文本，行数取决于屏幕的宽度。

除了制作各种媒体查询和构建一些工作之外，我还不愿意使用干净的CSS解决方案，当屏幕宽度变化时，粘性页脚会自动适应。

你们中有人有最终答案吗？

Answer 1

欢迎来到 flexbox 的神奇世界！试试这个...... 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;。

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

来自Mozilla ...

CSS3 Flexible Box或flexbox是一种布局模式在页面上排列元素以使元素表现出来可预见的是，页面布局必须适应不同的屏幕尺寸和不同的显示设备。 ...注意：虽然CSS灵活框架布局规范处于候选推荐阶段，并非所有浏览器都实现了它。

Answer 2

尝试这样的事情：

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

粘性页脚的高度相对于容器的高度，百分比为：

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

您可能需要使用媒体查询为文本整理一些边距/填充，但如果没有它们，页脚尺寸将是动态的。

如何制作流畅的粘性页脚

2 个答案: