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

In einem Artikel erfahren Sie, wie Sie Vue-Frontend-Paging und Backend-Paging implementieren.

Inhaltsverzeichnis 1: Handschriftliche Seitennumm...

Lösung für Ubuntu 20.04 Firefox kann keine Videos abspielen (Flash-Plug-In fehlt)

1. Downloadadresse für das Flash-Plug-in-Paket: h...

Vue-Element-Admin integriert eine eigene Schnittstelle, um den Login-Sprung zu realisieren

1. Schauen Sie sich zunächst die Anforderungskonf...

Implementierung einer coolen 3D-Würfeltransformationsanimation in CSS3

Ich liebe das Programmieren, es macht mich glückl...

Verwendung von „Select“, „Distinct“ und „Limit“ in MySQL

Inhaltsverzeichnis 1. Einleitung 2. auswählen 2.1...

Detaillierte Erklärung des Linx awk-Einführungstutorials

Awk ist eine Anwendung zur Verarbeitung von Textd...

Mysql verwendet den Kill-Befehl, um das Deadlock-Problem zu lösen (eine bestimmte SQL-Anweisung, die ausgeführt wird, abzubrechen).

Bei der Verwendung von MySQL zum Ausführen bestim...

So erstellen Sie Ihren eigenen nativen JavaScript-Router

Inhaltsverzeichnis Vorwort Einführung JavaScript ...

Tipps zur Kurzschrift in JavaScript

Inhaltsverzeichnis 1. Arrays zusammenführen 2. Ar...

js-Objekt, um einen Daten-Paging-Effekt zu erzielen

In diesem Artikelbeispiel wird der spezifische Co...

Sammlung von 25 Schriftarten, die in berühmten Website-Logos verwendet werden

In diesem Artikel sind die Schriftarten zusammeng...

MySQL 5.7.21 dekomprimierte Version des Tutorials zum Wiederherstellen von Daten über das historische Datenverzeichnis

Situationsbeschreibung: Die Datenbank wurde abnor...

Vue verwendet ECharts zur Implementierung von Liniendiagrammen und Kreisdiagrammen

Bei der Entwicklung eines Backend-Verwaltungsproj...

Detaillierte Erläuterung der MySQL-Limitnutzung und Leistungsanalyse von Paging-Abfrageanweisungen

Beschränken Sie die Nutzung Wenn wir Abfrageanwei...

Grundlegendes Nutzungs-Tutorial zur IPTABLES-Firewall unter LINUX

Vorwort Für Produktions-VPS mit öffentlicher IP w...