Question

我希望获得一个粘性页脚，即使页面内容很短，页脚也位于窗口底部，但会在内容较长（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模块？

Answer 1

标题div只需要将宽度设置为100％即可停止折叠。

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

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

粘性页脚与purecss

1 个答案: