So verwenden Sie das Flex-Layout, um ein Scrollen des festen Inhaltsbereichs im Kopf zu erreichen

Das feste Layout des Seitenkopfes wurde zuvor mit position:fixed implementiert, jetzt kann es aber mit dem Flex-Layout implementiert werden, was schnell und bequem ist.

Vorteile des Flex-Layouts: 1. Der HTML-Dokumentenfluss wird nicht zerstört. 2. Bessere Kompatibilität.

„display: flex“ und „display: -webkit-box“ sind nur Namen für unterschiedliche Phasen und es gibt keinen Unterschied.

<Ansicht>
 <Ansicht Klasse="Header"></Ansicht>
 <Ansicht Klasse="Inhalt"></Ansicht>
</Ansicht>

Seite{
 Anzeige: -webkit-box; //Elastisches Layout festlegen -webkit-box-orient: vertikal; //Vertikale Layouthöhe für Unterelemente festlegen: 100 %;
}
.header:{
  Höhe: 50px; //Kopfhöhe festlegen (feste Position)
}  
.Inhalt:{
  -webkit-box-flex: 1; //1 gleichen Teil festlegen, um den gesamten Bildschirm auszufüllen overflow: auto //Überlauf-Scrollen festlegen}

Hinweis: Wenn keine Reaktion erfolgt, entfernen Sie die Außenansicht

Damit ist dieser Artikel über die Verwendung des Flex-Layouts zum Scrollen des festen Inhaltsbereichs in der Kopfzeile abgeschlossen. Weitere relevante Inhalte zum Scrollen des festen Inhaltsbereichs der Flex-Kopfzeile finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!