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