1

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

我在页面上使用 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 模块？

4

1 回答 1

1

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

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

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

于 2015-06-15T22:33:55.113 回答