Detaillierte Erklärung der Verwendung von overflow:auto

Detaillierte Erklärung der Verwendung von overflow:auto

Bevor ich mit dem Haupttext beginne, werde ich einige Verwendungsmöglichkeiten von Overflow und Flex-Layout vorstellen.
overflow: auto; Wird der Inhalt gekürzt, blendet der Browser eine Scrollleiste ein, damit der restliche Inhalt betrachtet werden kann.
Eigenschaften in Flex
Anzeige: Flex;
Flex-Direction: Spalte; Die Hauptachse ist vertikal und der Startpunkt befindet sich an der oberen Kante.
Overflow- und Flex-Layout gemeinsam verwenden

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="utf-8">
    <title>Verwendung von overflow:auto</title>
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, Maximalmaßstab=1, benutzerdefiniert skalierbar=nein" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />

    <style type="text/css">
        html,Text{
            Breite: 100 %;
            Höhe: 100%;
        }
        .Container{
            Breite: 100 %;
            Höhe: 100%;
            Anzeige: Flex;
            Flex-Richtung: Spalte;
        }
        .header{
            Breite: 100 %;
            Höhe: 100px;
            Hintergrund: #f99;
        }
        .Inhalt{
            Breite: 100 %;
            Höhe: 100%;
            Überlauf: automatisch;
            Hintergrund: gelb;
            biegen: 1;
        }
        .Fußzeile{
            Breite: 100 %;
            Höhe: 100px;
            Hintergrund: #99f;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Container">
        <div Klasse="Header">

        </div>
        <div Klasse="Inhalt">
            <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>
                Damit der Effekt angezeigt wird, muss hier mehr li geschrieben werden. Ich mache das hier, um Platz zu sparen.
            </ul>
        </div>

        <div Klasse="Fußzeile">
        </div>
    </div>
</body>
</html>

Um den Overflow: Auto-Effekt zu erzielen, schreiben Sie zuerst das Layout und dann den Stil.
Fügen Sie im Stil dem äußersten übergeordneten Box-Container den folgenden Stil hinzu:

.Container{
    Breite: 100 %;
    Höhe: 100%;
    Anzeige: Flex;
    Flex-Richtung: Spalte;
}

Achten Sie außerdem darauf, dass HTML und Textkörper eine Breite und Höhe von 100 % aufweisen.

html,Text{
    Breite: 100 %;
    Höhe: 100%;
}

Kopf- und Fußbereich haben eine feste Höhe. Kopf- und Fußbereich allgemeiner Apps sind festgelegt, wie etwa bei WeChat-Chataufzeichnungen.

.header{
    Breite: 100 %;
    Höhe: 100px;
    Hintergrund: #f99;
}
.Fußzeile{
    Breite: 100 %;
    Höhe: 100px;
    Hintergrund: #99f;
}

Der Inhalt in der Mitte erhält flex:1 und unser Hauptzeichen overflow:auto wird hinzugefügt; der Inhalt darüber hinaus wird automatisch abgeschnitten.

.Inhalt{
    Breite: 100 %;
    Höhe: 100%;
    Überlauf: automatisch;
    Hintergrund: gelb;
    biegen: 1;
    }

Das Wirkungsdiagramm sieht wie folgt aus:

這里寫圖片描述

Der Inhaltsbereich in der Mitte lässt sich nach oben und unten verschieben, der überstehende Teil wird automatisch abgeschnitten.
Egal wie sich die Dinge ändern, das Wesentliche bleibt dasselbe. Wenn Sie Schwierigkeiten haben, bestimmte Funktionen in Ihrem Projekt zu implementieren, können Sie zunächst eine kleine Demo erstellen, wie die obige Demo. Vielleicht wird jemand sagen, dass es so einfach ist, aber wenn Sie aufgefordert werden, mit React ein Layout für ein Chat-Fenster ähnlich wie WeChat zu schreiben, wie implementieren Sie es dann?
Das Folgende ist ein kleines Projekt, das ich mit React geschrieben habe und das dem WeChat-Chatfenster ähnelt.

這里寫圖片描述

Dies ist das Ende dieses Artikels zur detaillierten Verwendung von overflow:auto. Weitere relevante Inhalte zur Verwendung von overflow:auto finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  Detaillierte Erläuterung der Installations-, Konfigurations-, Start- und Herunterfahrmethoden des MySQL-Servers

>>:  Implementieren der Formularübermittlung ohne Aktualisierung der Seite basierend auf HTML

Artikel empfehlen

Ist Ihre Website für IE8 geeignet?

Während der Olympischen Spiele wird IE 8 Beta 2 ve...

Der Unterschied zwischen Docker Run und Start

Der Unterschied zwischen Ausführen und Starten in...

Verwenden von js zum Implementieren eines einfachen Lichtschaltercodes

Körperteil: <button>Licht ein-/ausschalten&...

Detailliertes Tutorial zur Installation von ffmpeg unter Linux

1. Installieren Sie ffmpeg unter Centos Linux 1. ...

So aktivieren Sie das langsame Abfrageprotokoll in MySQL

1.1 Einleitung Durch Aktivieren des Slow Query Lo...

Ausführliche Erläuterung der Stilfunktion in Vue3-Einzeldateikomponenten

Inhaltsverzeichnis Stil mit Gültigkeitsbereich St...

Tiefgreifendes Verständnis der Verwendung von r2dbc in MySQL

Einführung MySQL sollte eine sehr häufig verwende...

Standardtypen für generische TypeScript-Parameter und neue Option zur strikten Kompilierung

Inhaltsverzeichnis Überblick Erstellen Sie eine T...

Verschiedene Probleme, auf die Anfänger bei der Installation von MySQL in Docker stoßen

Vorwort In letzter Zeit dauert das Herunterfahren...

Zusammenfassung von 11 erstaunlichen Best Practices für die Refaktorierung von JavaScript-Code

Inhaltsverzeichnis 1. Extrahieren von Funktionen ...

Beispiel für die MySQL-Volltext-Fuzzy-Suche nach der Methode MATCH AGAINST

MySQL 4.x und höher bieten Unterstützung für die ...

Einführung in die neuen Funktionen von MySQL 8.0.11

MySQL 8.0 für Windows v8.0.11 offizielle kostenlo...

Tomcat Server Erste Schritte Super ausführliches Tutorial

Inhaltsverzeichnis 1. Einige Konzepte von Tomcat ...

Auszeichnungssprache - Bildersetzung

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...

Nodejs-Plugin und Nutzungsübersicht

Die Betriebsumgebung dieses Tutorials: Windows 7-...