Wie kann ich mit Flexbox ein DIV erstellen, das den Raum zwischen Kopf- und Fußzeile ausfüllt?-CSS-Tutorial-php.cn

Wie kann ich mit Flexbox ein DIV erstellen, das den Raum zwischen Kopf- und Fußzeile ausfüllt?

Linda Hamilton

Freigeben： 2024-11-08 12:45:02

Original

729 Leute haben es durchsucht

How can I use Flexbox to create a DIV that fills the space between a header and footer?

Erstellen eines DIV, um den Raum zwischen Kopf- und Fußzeilen-DIV zu füllen

Beim Entwerfen eines Website-Layouts ist es oft wünschenswert, einen Header zu haben, Fußzeile und Inhaltsbereich, die nahtlos ineinander übergehen. Zu diesem Zweck bieten DIVs eine größere Flexibilität im Vergleich zu herkömmlichen Tabellen.

Um sicherzustellen, dass die Fußzeile am Ende der Seite bleibt und sich das Inhalts-DIV dynamisch anpasst, um den Raum zwischen Kopf- und Fußzeile zu füllen, gibt es eine einfache Lösung bei der Verwendung von Flexbox.

Flexbox-Implementierung

Flexbox bietet eine Möglichkeit, Elemente auf einer Seite anzuordnen, sodass sie sowohl in einer Zeile als auch in einer Spalte fließen können. In unserem Fall möchten wir, dass das Layout in einer Spalte verläuft, wobei Kopf- und Fußzeile an ihrer jeweiligen oberen und unteren Position bleiben.

Die HTML-Struktur bleibt einfach, mit einer Kopfzeile, einem Hauptinhalt und einer Fußzeile:

<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

Nach dem Login kopieren

Das CSS kann dann wie folgt angewendet werden:

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

Nach dem Login kopieren

Erklärung

Flex-Direction: Spalte legt die fest Flexbox, um seine untergeordneten Elemente vertikal anzuordnen.
flex: none in der Kopf- und Fußzeile verhindert, dass sie überschüssigen Platz beanspruchen.
overflow-y: scroll ermöglicht vertikales Scrollen innerhalb des Hauptinhaltsbereichs. Sicherstellen, dass der Inhalt der Seite in den verbleibenden Platz passt.
-webkit-overflow-scrolling: Touch optimiert das Scrollverhalten für Touch-Geräte.
Flex: Auto ermöglicht, dass der Hauptinhaltsbereich den verbleibenden Bereich dynamisch füllt Platz zwischen Kopf- und Fußzeile, unabhängig von der Bildschirmauflösung.

Zusätzliche Überlegungen

Wenn der Inhalt den verfügbaren Platz überschreitet, wird eine vertikale Bildlaufleiste angezeigt Hauptinhaltsbereich.

Durch die Verwendung von Flexbox können Sie ganz einfach ein Layout erstellen, bei dem sich der Inhalt dynamisch anpasst, um den Raum zwischen einer festen Kopf- und Fußzeile zu füllen, was zu einem reaktionsschnellen und optisch ansprechenden Design führt.

Das obige ist der detaillierte Inhalt vonWie kann ich mit Flexbox ein DIV erstellen, das den Raum zwischen Kopf- und Fußzeile ausfüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!