带有 purecss 的粘性页脚

Question

我想实现一个粘性页脚，所以页脚位于 window 的底部，即使页面内容很短，但在内容较长的页面上会被向下推 (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 或更好的方法来实现粘性页脚，同时仍然能够使用纯 css 模块？

Answer 1

header div 只需要将宽度设置为 100% 即可停止折叠。

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

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

带有 purecss 的粘性页脚

Sticky footer with purecss

css

yui-pure-css