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

Detaillierte Erklärung des Unterschieds und der Verwendung von Anführungszeichen und Backticks in MySQL

Vorwort Also habe ich diesen Blog geschrieben. Di...

Einführung in den B-Tree-Einfügeprozess

Im vorherigen Artikel https://www.jb51.net/articl...

Zusammenfassung der Lastausgleichsmethoden von Nginx

Um den Lastenausgleich zu verstehen, müssen Sie s...

Verstehen Sie einfach die Schreib- und Ausführungsreihenfolge von MySQL-Anweisungen

Es gibt einen großen Unterschied zwischen der Sch...

Detaillierte Erklärung des Rastersystems, der Navigationsleiste und des Karussells von Javascript Bootstrap

Inhaltsverzeichnis Einführung in Bootstrap und di...

Vue implementiert Baumtabelle

In diesem Artikelbeispiel wird der spezifische Co...

So starten und stoppen Sie das Shell-Skript zur Bereitstellung eines SpringBoot-JAR-Programms unter Linux

Lassen Sie mich Ihnen ohne weitere Umschweife den...

SQL-Implementierung LeetCode (185. Top drei der höchsten Gehälter in der Abteilung)

[LeetCode] 185. Die drei höchsten Gehälter der Ab...

Drei Möglichkeiten zum Parsen von QR-Codes mit Javascript

Inhaltsverzeichnis 1. Verwenden Sie JavaScript, u...

Eine schnelle Lösung für das Problem des automatischen Zeilenumbruchs in Tabellenüberschriften im Responsive Framework

Ich habe kürzlich Bootstrap zum Entwickeln einer ...

Zusammenfassung der Verwendung von MySQL-Datums- und Uhrzeitfunktionen

Dieser Artikel basiert auf MySQL 8.0 Dieser Artik...

Rendering-Funktion und JSX-Details

Inhaltsverzeichnis 1. Grundlagen 2. Knoten, Bäume...

Wie stelle ich Tomcat als automatisch gestarteten Dienst ein? Der schnellste Weg

Stellen Sie Tomcat so ein, dass der Dienst automa...

Tiefgreifendes Verständnis mathematischer Ausdrücke in CSS calc()

Der mathematische Ausdruck calc() ist eine Funkti...

Fassen Sie die häufigsten Anwendungsprobleme von XHTML-Code zusammen

<br />Ich habe festgestellt, dass viele Leut...