overflow:autoの使い方の詳しい説明

本文に入る前に、オーバーフローとフレックスレイアウトの使い方をいくつか紹介します。
overflow: auto; コンテンツがトリミングされた場合、ブラウザには残りのコンテンツを表示するためのスクロールバーが表示されます。
flexのプロパティ
ディスプレイ: フレックス;
flex-direction: column; 主軸は垂直で、開始点は上端にあります。
オーバーフローとフレックスレイアウトを併用する

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

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="utf-8">
    <title>overflow:auto の使用</title>
    <meta name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1、ユーザースケーラブル=いいえ" />
    <link rel="スタイルシート" type="text/css" href="css/reset.css" />

    <スタイル タイプ="text/css">
        html,本文{
            幅: 100%;
            高さ: 100%;
        }
        。容器{
            幅: 100%;
            高さ: 100%;
            ディスプレイ: フレックス;
            flex-direction: 列;
        }
        。ヘッダ{
            幅: 100%;
            高さ: 100px;
            背景: #f99;
        }
        。コンテンツ{
            幅: 100%;
            高さ: 100%;
            オーバーフロー:自動;
            背景: 黄色;
            フレックス: 1;
        }
        .フッター{
            幅: 100%;
            高さ: 100px;
            背景: #99f;
        }
    </スタイル>
</head>
<本文>
    <div class="コンテナ">
        <div class="header">

        </div>
        <div class="content">
            <ul>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                効果が表示されるようにするには、ここにさらに li を書き込む必要があります。ここではスペースを節約するためにこれを行っています。
            </ul>
        </div>

        <div class="footer">
        </div>
    </div>
</本文>
</html>

overflow: auto; 効果を実現するには、まずレイアウトしてからスタイルを記述します。
スタイルでは、最も外側の親ボックスコンテナーに次のスタイルを追加します。

。容器{
    幅: 100%;
    高さ: 100%;
    ディスプレイ: フレックス;
    flex-direction: 列;
}

また、html と body の幅と高さを必ず 100% にしてください。

html,本文{
    幅: 100%;
    高さ: 100%;
}

ヘッダーと下部の高さは固定されています。一般的なアプリのヘッダーと下部は、WeChat のチャット記録のように固定されています。

。ヘッダ{
    幅: 100%;
    高さ: 100px;
    背景: #f99;
}

.フッター{
    幅: 100%;
    高さ: 100px;
    背景: #99f;
}

中央のコンテンツには flex: 1 が指定され、メイン文字の overflow: auto が追加されます。その先のコンテンツは自動的に切り取られます。

。コンテンツ{
    幅: 100%;
    高さ: 100%;
    オーバーフロー:自動;
    背景: 黄色;
    フレックス: 1;
    }

効果図は以下のとおりです。

這里寫圖片描述

中央のコンテンツエリアは上下にスライドでき、余分な部分は自動的に切り取られます。
物事がどのように変化しても、本質は同じです。プロジェクトで特定の機能を実装するのが難しい場合は、まず上記のデモのような小さなデモを作成できます。簡単だと言う人もいるかもしれませんが、Reactを使用してWeChatに似たチャットウィンドウのレイアウトを作成するように求められた場合、どのように実装しますか？
以下は、WeChat チャットウィンドウに似た、React を使用して作成した小さなプロジェクトです。

這里寫圖片描述

この記事は、overflow:autoの詳しい使い方についての説明はこれで終わりです。overflow:autoの使い方に関するより詳しい内容については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<: emとは？emとpxの紹介と変換方法

>>: Mysqlサーバーのインストール、構成、起動、シャットダウン方法の詳細な説明