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

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

Linda HamiltonOriginal: 2024-11-08 12:45:02605Durchsuche

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>

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;
}

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!

css html webkit for auto using this overflow column flex

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie kann ich ohne JavaScript einen Hyperlink aus einer gesamten Tabellenzelle erstellen?Nächster Artikel：Wie kann ich ohne JavaScript einen Hyperlink aus einer gesamten Tabellenzelle erstellen?

In Verbindung stehende Artikel

Mehr sehen