5

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

流体设计中的粘性页脚并不是那么微不足道。我找到了实现粘性页脚的提示、讨论和解决方案。但是，所有这些都取决于页脚的固定且已知的高度。在我的例子中，页脚的高度包含文本，行数取决于屏幕的宽度。

与其进行各种媒体查询和构建一些工作，我更喜欢一个干净的 CSS 解决方案，其中粘性页脚会在屏幕宽度变化时自动适应。

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

4

2 回答 2

8

欢迎来到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;and flex: 1;。

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

来自Mozilla ...

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

于 2013-12-06T19:51:49.447 回答
0

尝试这样的事情：

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

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

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

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

于 2013-06-03T17:29:05.393 回答