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

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サーバーのインストール、構成、起動、シャットダウン方法の詳細な説明

推薦する

一般的な Linux ツール vi/vim の完全版

なぜvimを学ぶのかLinuxには多数の設定ファイルがあるため、Linuxには多くのテキスト処理ツー...

フォーム要素の簡単な実装コードでは登録を例に挙げています

コード実装:コードをコピーコードは次のとおりです。 <!DOCTYPE html> &l...

Linux でネットワーク パケット損失と遅延をシミュレートする方法

netem と tc: netem は、Linux カーネル バージョン 2.6 以降で提供されるネ...

MySQL データベースの詳細な説明 (Ubuntu 14.0.4 LTS 64 ビットベース)

1. MySQLデータベースの構成と関連概念まず、MySQL はリレーショナル データベースである...

MySQL の全体的なアーキテクチャの紹介

MySQL の全体的なアーキテクチャは、サーバー層とストレージ エンジン層に分かれています。サーバー...

vue.config.js パッケージ最適化構成

Baiduの情報は多様すぎて目が回ります。心配しないでください。私はあなたのためにそれを体験しました...

mysql init_connect に関するいくつかの重要なポイントの要約

init_connectの役割init_connect は通常、接続が来たときに、自動コミットを 0...

Mysql ファジークエリが大文字と小文字を区別するかどうかの詳細な調査

序文最近、私は小さな個人ブログ プロジェクトを書くのに忙しくしています。 「グローバル検索」機能を実...

jquery+springbootでファイルアップロード機能を実現

この記事の例では、ファイルアップロード機能を実現するためのjquery+springbootの具体的...

ネイティブWeChatアプレット開発におけるreduxの使用の詳細な説明

前提複雑なシナリオでは、複数の異なるページ間で大量のデータを使用したり変更したりする必要があります。...

js の関数の長さはどれくらいですか?

目次序文なぜいくらですか?パラメータの数デフォルトパラメータ残りのパラメータ要約する序文今日は関数の...

Node.JS で悪天候のリアルタイム警報システムを構築する

目次序文:ステップ1: 無料の天気予報インターフェースを見つけるステップ2: 天気予報インターフェー...

要素のel-tree複数選択ツリー(チェックボックス)親子ノードの関連付けが関連付けられていません

属性チェック-厳密公式ドキュメントでは、チェックボックスが表示されるときに親項目と子項目を互いに関連...

HTML ウェブページの段落レイアウトと改行

Web ページの外観はレイアウトに大きく左右されます。ページ内に長い段落のテキストがある場合、通常は...