带有 purecss 的粘性页脚答案

【问题标题】：Sticky footer with purecss带有 purecss 的粘性页脚
【发布时间】：2015-09-24 08:12:29
【问题描述】：

我想实现一个粘性页脚，这样即使页面内容很短，页脚也会位于窗口底部，但会在内容较长的页面上被下推（like this）。

我在页面上使用了 YUI purecss，但是页眉中的 pure-g div 并没有像往常一样扩展到全宽。

HTML

<body class="site">
    <div class="header">
        <div class="pure-g">
            <div class="pure-u-1 pure-u-md-1-4">One quarter</div>
            <div class="pure-u-1 pure-u-md-3-4">Three quarters</div>
        </div>
    </div>
    <div class="main">
        <div class="pure-g">
            <div class="pure-u-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.</div>
        </div>
    </div>
    <div class="footer">
        <div class="pure-g">
            <div class="pure-u-1" style="background-color:#302c2d; color:white;">Footer</div>
        </div>
    </div>
</body>

CSS

.site {
    display: -webkit-flex;
    display: flex;
    min-height: 100vh; 
    -webkit-flex-direction: column;
            flex-direction: column;
    margin:0;
}
.main {
    -webkit-flex: 1;
            flex: 1;
    margin:0px auto;
    max-width:600px;
}
.header {
    max-width:600px;
    margin: 0 auto;
}

这里是jsfiddle

是否需要添加一些额外的 css 或更好的方法来实现粘页脚，同时仍然能够使用 purecss 模块？

【问题讨论】：

标签： css yui-pure-css

【解决方案1】：

标题 div 只需将宽度设置为 100% 即可阻止其折叠。

.header {
    max-width:600px;
    width:100%;
    margin: 0 auto;
}

所以 YUI purecss 在粘性页脚模板中工作没有问题。

【讨论】：