ウェブサイトのフッター沈下現象に対する3つの解決策を詳しく解説

背景

多くのウェブサイトのデザインは、一般的にコンテンツ+フッターの2つの部分で構成されています。コンテンツにはウェブサイトのメインコンテンツが含まれ、フッターにはウェブサイトの登録情報などが表示されます。ウェブサイトのコンテンツの高さが不確実なため、次の2つの状況が発生する可能性があります。

1. コンテンツが少ない場合、フッターはページの下部に固定されます。以下のように表示されます。

2. コンテンツが長い場合、次の図の赤いボックスに示すように、フッターはコンテンツの後ろにスライドします。

この要件は、PC 側では依然として非常に一般的です。私も自分のアプリケーションでこの問題に遭遇しました。今日は、このレイアウトを実現するためのいくつかの方法をまとめました。

方法1: jsを使用して計算する

なぜ最初に js コントロールを使用したのでしょうか? 正直に言うと、この問題に初めて遭遇したとき、私は直接 js を使用して解決しました (主に、js で確実に解決できるとわかっていたので、他の方法を考えるのに時間を費やさなかったためです)

基本的な考え方は、ページが読み込まれた後、画面の高さ（コンテンツの実際の高さ）を計算することです。差が

フッターの高さを決定するには、フッタースタイルに固定位置を追加して、画面の下部に固定します。

デモコードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
    <title>フッター下部の効果</title>
    <スタイル タイプ="text/css">
        div {
            マージン: 0,
            パディング: 0;
            ボックスのサイズ: 境界線ボックス;
            位置: 相対的;
        }
        html、本文{
            幅: 100%;
            高さ: 100%;
        }
        ＃容器 {
            幅: 100%;
            高さ: 100%;
        }
        ＃コンテンツ {
            背景: 青;
        }
        #フッター{
            幅: 100%;
            高さ: 100px;
            背景: 赤;
        }
        .footer-fixed {
            位置: 固定;
            左: 0;
            下部: 0;
        }
    </スタイル>
</head>
<本文>

<div id="コンテナ">
    <div id="content"> コンテンツ </div>

    <div id="フッター">
        フッター
    </div>
</div>

<script type="text/javascript">
    高さを document.getElementById('container').clientHeight とします - document.getElementById('content').clientHeight;
    // ここでフッターに別のクラスを追加して固定します。if (height > 100) document.getElementById('footer').classList.add('footer-fixed');
</スクリプト>

</本文>
</html>

CSS で問題を解決できる場合は js を決して使用しないという原則に基づくと、この方法は最も簡単に考えられますが、それでも推奨されません。さらに、この CSS コードは clientHeight を取得する必要があり、これによりページがリフローされて再描画されます。パフォーマンスの観点からは、推奨されません。

方法2: フレックスレイアウト+min-heightを使用する

justify-content: フレックスレイアウトのspace-between。非常に便利なmin-heightを使用すると、コンテンツが不十分な場合にフッターを沈める効果を満たすことができます。

デモコードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
    <title>フッター下部の効果</title>
    <スタイル タイプ="text/css">
        div {
            マージン: 0;
            パディング: 0;
            ボックスのサイズ: 境界線ボックス;
            位置: 相対的;
        }
        html、本文{
            幅: 100%;
            高さ: 100%;
            マージン: 0;
            パディング: 0;
        }
        ＃容器 {
            幅: 100%;
            // キーコード // コンテナの高さは不明ですが、最小の高さを設定できるため、レイアウトに役立ちます。min-height: 100%;
            ディスプレイ: フレックス;
            flex-direction: 列;
            コンテンツの両端揃え: スペースの間;
        }
        ＃コンテンツ {
            背景: 青;
        }
        #フッター{
            幅: 100%;
            高さ: 100px;
            背景: 赤;
        }
    </スタイル>
</head>
<本文>

<div id="コンテナ">
    <div id="コンテンツ"> 
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
    </div>

    <div id="フッター">
        フッター
    </div>
</div>

</本文>
</html>

Min-height は、非常に便利な CSS 属性です。flex と組み合わせると、簡単にボトミング効果を実現できます。

方法3: flex + margin-topを使用する

このトリックは、margin auto の素晴らしい使い方について話しているときに学びました。flex フォーマットのコンテキストでは、margin auto は残りのスペースを自動的に分配します。ここでは、フッターに margin-top:auto を使用して、ボトム効果を実現できます。

<!DOCTYPE html>
<html>
<ヘッド>
    <title>フッター下部の効果</title>
    <スタイル タイプ="text/css">
        div {
            マージン: 0;
            パディング: 0;
            ボックスのサイズ: 境界線ボックス;
            位置: 相対的;
        }
        html、本文{
            幅: 100%;
            高さ: 100%;
            マージン: 0;
            パディング: 0;
        }
        ＃容器 {
            幅: 100%;
            最小高さ: 100%;
            ディスプレイ: フレックス;
            flex-direction: 列;
        }
        ＃コンテンツ {
            背景: 青;
        }
        #フッター{
            幅: 100%;
            高さ: 100px;
            背景: 赤;
            margin-top: auto; // キーコード}
    </スタイル>
</head>
<本文>

<div id="コンテナ">
    <div id="コンテンツ"> 
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
        コンテンツ <br>
    </div>

    <div id="フッター">
        フッター
    </div>
</div>

</本文>
</html>

まとめ: 上記の 3 つの方法には副作用はありません。実際、この沈下効果を実現する方法は他にもありますが、他のレイアウトに影響します。ここでは詳細には触れません。より良い解決策が見つかったら、後で更新します。

<<: Vueのコンポーネントのprops属性について詳しく説明します

>>: tomcat9.exeをクリックするとクラッシュする問題を解決する方法