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 Schritte zur Installation der dekomprimierten Version von MySQL 5.7.20 (zwei Methoden)

Ich werde die Installation von MySQL unter Window...

MySQL-Trigger: ausführliche Erklärung und einfaches Beispiel

Einfaches Beispiel für einen MySQL-Trigger Gramma...

Detailliertes Tutorial zur Installation von Anaconda3 auf Ubuntu 18.04

Anaconda bezeichnet eine Open-Source-Python-Distr...

So implementieren Sie die Vue-Bindungsklasse und den Inline-Bindungsstil

Inhaltsverzeichnis Bindungsklasse Inline-Stile bi...

So installieren Sie Docker CE auf Ubuntu 18.04 (Community Edition)

Deinstallieren Sie alte Versionen Sollten Sie zuv...

So erstellen Sie eine Swap-Partitionsdatei in Linux

Einführung in Swap Swap (d. h. Swap-Partition) in...

Einfache Prinzipien für die Gestaltung des Webseiten-Layouts

Dieser Artikel fasst einige einfache Prinzipien d...

Detaillierte Erläuterung des Problems des unendlichen Neustarts beim Ausführen der Docker-Umgebung des SpringBoot-Projekts

Vielleicht habe ich angefangen, falsch zu denken,...

Warum wird mir die Zugriffsschnittstelle für Docker Tomcat nicht angezeigt?

Frage: Kann der Ursprungsserver keine Darstellung...

CSS- und HTML- und Front-End-Technologie-Schichtendiagramm

Front-End-Technologieschicht (Das Bild ist etwas e...

Detaillierte Erläuterung der Pipeline und des Ventils im Tomcat-Pipeline-Modus

Vorwort Wenn in einem relativ komplexen großen Sy...

SSM VUE Axios Detaillierte Erklärung

Inhaltsverzeichnis Wie wird das SQL-Protokoll ang...

Detaillierte Schritte zum Starten des Django-Projekts mit nginx+uwsgi

Wenn wir ein Webprojekt mit Django entwickeln, wi...

Detaillierte Erläuterung der Nginx-Standortkonfiguration (Standortübereinstimmungsreihenfolge)

Standort bedeutet „Positionierung“, was hauptsäch...

So führen Sie Tomcat-Quellcode im Maven-Modus aus

Vorwort Kürzlich habe ich den Startvorgang von To...