CSS スティッキーフッターのいくつかの実装

「スティッキーフッター」とは

いわゆる「スティッキーフッター」は、新しいフロントエンドの概念や技術ではありません。これは、Web ページの効果を指します。ページコンテンツの長さが足りない場合は、フッターがブラウザーウィンドウの下部に固定され、コンテンツの長さが十分であれば、フッターがページの下部に固定されます。ただし、Web ページのコンテンツの長さが十分でない場合は、下部フッターはブラウザウィンドウの下部に残ります。

次の例を見てみましょう。コードは次のとおりです。

<div class="header">
    </div>
<div class="main">
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
</div>
<div class="footer">
    <i class="fa fa-copyright" aria-hidden="true"></i>
    <div>下</div>
</div>

.ヘッダー{
    背景色: #3498DB;
    高さ: 50px;
    行の高さ: 50px;
    テキスト配置: 中央;
    色: #fff;
}
。主要 {
    オーバーフロー:自動;
    ボックスのサイズ: 境界線ボックス;
}

.フッター{
    背景色: #ECF0F1;
    高さ: 50px;
    行の高さ: 50px;
    テキスト配置: 中央;
}

注意深い読者なら、この問題に気付いたはずです。フッターの位置は、メインコンテンツの高さに応じて自動的に変わります。メインコンテンツがビューポートの高さよりも小さい場合、フッターは下部に付いていません。では、この問題をどのように解決すればよいのでしょうか?

マイナスマージン

<div class="main">
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
</div>
<div class="footer">
    <i class="fa fa-copyright" aria-hidden="true"></i>
    <div>下</div>
</div>

html,
体 {
    高さ: 100%;
}
。ヘッダ{
    背景色: #3498DB;
    高さ: 50px;
    行の高さ: 50px;
    テキスト配置: 中央;
    色: #fff;
    位置: 固定;
    幅: 100%;
}
。主要 {
    最小高さ: 100%;
    オーバーフロー:自動;
    ボックスのサイズ: 境界線ボックス;
    パディング下部: 50px;
    パディング上部: 50px;
    下マージン: -50px;
}

.フッター{
    背景色: #ECF0F1;
    高さ: 50px;
    行の高さ: 50px;
    テキスト配置: 中央;
}

固定高さソリューション

次のプロパティを使用します

最小高さ
計算
ヴ

calc() は CSS3 で導入され、CSS プロパティ値を宣言するときに計算を実行できるようになります。

いくつかの数値的な状況で使用できます。詳細については、MDNを参照してください。

vh (ビューポートの高さ): ご想像のとおり、ビューポートの高さを表します。

詳細な情報と互換性については、caniuse をご覧ください。

上記のコードを次のように変更します

。主要 {
    最小高さ: calc(100vh - 50px - 50px);
}

これは期待どおりに機能しますが、欠点の 1 つは、ヘッダーとフッターの高さを毎回計算する必要があることです。

これは明らかに完璧ではありません。DOM 構造のレベルが多ければ多いほど、計算する必要があるコンテンツも増えます。

絶対

絶対値については誰もがよく知っていると思うので、ここでは詳細には触れませんが、絶対値要素の位置はどのような基準で計算され、配置されるかということにだけ注意してください。

<div class="header">
    ヘッダ
<div class="main">
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
</div>
<div class="footer">
    <i class="fa fa-copyright" aria-hidden="true"></i>
    <div>下</div>
</div>

html{
    位置: 相対的;
    最小高さ: 100%;
}
体{
    下部マージン: 50px;
}
.ヘッダー{
    背景色: #3498DB;
    高さ: 50px;
    行の高さ: 50px;
    テキスト配置: 中央;
    色: #fff;
}
。主要 {
    オーバーフロー:自動;
}

.フッター{
    位置: 絶対;
    下:0;
    幅: 100%;
    背景色: #ECF0F1;
    高さ: 50px;
    行の高さ: 50px;
    テキスト配置: 中央;
}

コードは非常にシンプルです。メインの位置アプリケーションは次のとおりです。

1 デフォルトでは、要素がposition:absoluteに設定されている場合、祖先要素にposition: absolute、fixed、relativeが設定されていない場合は

デフォルトでは、最初の包含ブロックを基準にしたものになります。

2 どの初期化子にブロックが含まれますか?

ルート要素が存在する包含ブロックは、初期包含ブロックと呼ばれる長方形です。連続メディアの場合、ビューポートの寸法を持ち、キャンバスの原点に固定されます。

これは W3C による包含ブロックの紹介です。この段落の一般的な意味は、ルート要素 (ドキュメント) がデフォルトの初期包含ブロックであり、その初期化ブロックのサイズがビューポートのサイズであるということです。

これらの概念を理解した後、上記のコードを見てみましょう。一目でわかります。

    html{
        位置: 相対的;
        最小高さ: 100%;
    }

    体{
        下部マージン: 50px;
    }

position:relative は、絶対要素が HTML 要素に対して相対的に配置されるように包含ブロックを変更します。
min-height: コンテンツがビューポートに収まらない場合に、フッターが下部に固定されるようにします。
margin-bottom 値はフッター要素の高さであり、コンテンツ領域がフッターによって覆われないようにします。

フレックスボックス

Flexbox は完璧なソリューションです。これは数行の CSS で実現でき、上記のような HTML 要素を計算したり追加したりする必要はありません。

コードを次のように変更します。

<div class="コンテナ">
    <div class="header">
        </div>
    <div class="main">
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
    </div>
    <div class="footer">
        <i class="fa fa-copyright" aria-hidden="true"></i>
        <div>下</div>
    </div>
</div>

html,
体 {
    高さ: 100%;
}
。容器 {
    ディスプレイ: フレックス;
    flex-direction: 列;
    最小高さ: 100%;
}
.ヘッダー{
    背景色: #3498DB;
    高さ: 50px;
    行の高さ: 50px;
    テキスト配置: 中央;
    色: #fff;
}

。主要 {
    オーバーフロー:自動;
    ボックスのサイズ: 境界線ボックス;
    フレックス: 1;
}

.フッター{
    背景色: #ECF0F1;
    高さ: 50px;
    行の高さ: 50px;
    テキスト配置: 中央;
}

最終的な効果は次のようになります。