5

CSS を使用して Web サイトのスティッキー フッターを作成するために Boostrap サンプルを使用しています。これはすべて正常に機能し、ページのサイズが変更されてもフッターはページの下部に残ります。多くのページで、フッターを除いて実質的に全ページを表示する必要があるコンテンツがあります。したがって、ページのコンテンツ セクションの高さを 100% に設定する必要があります。これにより、そのコンテンツのサイズを全高に合わせることができます。

問題を示す JSFiddle を次に示します。

緑色のコンテナ div を全高にして、上部がページの上部に、下部がフッターの上部に接するようにするにはどうすればよいでしょうか?

ありがとう！

<div id="wrap">
    <!-- Begin page content -->
    <div class="container">
        <div class="page-header">
            <h1>Sticky footer</h1>

        </div>
        <p class="lead">This is the sticky footer template taken from the Bootstrap web site.</p>
        <p class="lead">How can we make this green .container div the full height of its parent #wrap div?</p>
    </div>
    <div id="push"></div>
</div>
<div id="footer">
    <div class="container"></div>
</div>

#wrap .container {
    background-color: lightgreen;
}
/* Sticky footer styles  */
html, body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push, #footer {
    height: 60px;
}

#footer {
    background-color: #f5f5f5;
}
4

1 に答える 1