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

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

Patricia Arquette

Freigeben： 2024-11-10 03:23:02

Original

258 Leute haben es durchsucht

How to Create a Div That Fills the Space Between Header and Footer Using Flexbox?

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

Achten Sie beim Übergang von tabellenbasierten Layouts auf die Verwendung von Divs auf den richtigen Abstand zwischen Kopf-, Inhalts- und Fußzeile Elemente können eine Herausforderung sein. Hier ist eine effektive Lösung mit Flexbox:

Flexbox-Lösung

Flexbox ermöglicht ein flexibles und reaktionsfähiges Layout und stellt sicher, dass Kopf- und Fußzeile fixiert bleiben, während der Inhaltsbereich den verbleibenden Platz ausfüllt.

HTML:

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

Nach dem Login kopieren

CSS:

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

Mit diesem Code wird das Body-Element als Flexbox-Spalte angezeigt und Kopf- und Fußzeile werden als Flex: None festgelegt , was darauf hinweist, dass sie sich nicht ausdehnen oder verkleinern dürfen. Das Hauptelement, das den Inhalt enthält, ist als „flex: auto“ festgelegt, wodurch es den gesamten verbleibenden Platz einnehmen kann. Die Eigenschaften overflow-y und -webkit-overflow-scrolling sorgen dafür, dass der Inhalt innerhalb des Hauptelements vertikal gescrollt werden kann.

Dieser Ansatz ermöglicht ein dynamisches Layout, das sich an unterschiedliche Bildschirmauflösungen anpasst und sicherstellt, dass der Header und Die Fußzeile bleibt unverändert, während der Inhalt den verfügbaren Platz ausfüllt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit Flexbox ein Div, 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!