Wie fülle ich den Raum zwischen Kopf- und Fußzeile mithilfe von Flexbox mit Divs?-CSS-Tutorial-php.cn

Wie fülle ich den Raum zwischen Kopf- und Fußzeile mithilfe von Flexbox mit Divs?

Linda Hamilton

Freigeben： 2024-11-19 06:10:03

Original

640 Leute haben es durchsucht

How to Fill the Space Between Header and Footer with Divs Using Flexbox?

Leerraum zwischen Kopf- und Fußzeile mit Divs füllen

Beim Übergang von Tabellen zu Divs für das Layout besteht eine häufige Herausforderung darin, dynamische Inhaltshöhen unter Beibehaltung der gewünschten Anordnung zu berücksichtigen. So erstellen Sie ein Div, das den gesamten Raum zwischen einer festen Kopf- und Fußzeile ausfüllt.

Flexbox-Lösung

Flex-Layout bietet eine elegante Lösung für dieses Szenario, indem es die Containerelemente (Kopf- und Fußzeile) zulässt ), um ihre festen Höhen beizubehalten und gleichzeitig eine automatische Anpassung des Inhaltsbereichs zu ermöglichen. Dieses Setup ähnelt dem Standardverhalten mobiler Apps.

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

In diesem Setup wird das Body-Div zu einem Flex-Container, und zwar Untergeordnete Elemente (Kopf-, Haupt- und Fußzeile) werden zu Flex-Elementen. Die Eigenschaft „flex-direction“ gibt die Richtung der Flex-Elemente an, in diesem Fall vertikal (Spalte).

Die Kopf- und Fußzeilenelemente sind auf „flex: none“ eingestellt, was bedeutet, dass sie im Verhältnis dazu nicht verkleinert oder vergrößert werden ihre ursprünglichen Abmessungen und stellt sicher, dass sie ihre festen Höhen beibehalten. Das Hauptelement hingegen ist auf „flex: auto“ eingestellt, was anzeigt, dass es den verbleibenden Platz ausfüllen soll.

Zusätzlich wird „overflow-y: scroll“ auf das Hauptelement angewendet, um vertikales Scrollen einzuleiten, wenn das Der Inhalt übersteigt den verfügbaren Platz. Die Eigenschaft „-webkit-overflow-scrolling: touch“ verbessert das Scrollverhalten auf iOS-Geräten.

Dieses Setup erstellt effektiv ein flexibles und dynamisches Layout, bei dem Kopf- und Fußzeile an ihrer jeweiligen oberen und unteren Position fixiert bleiben, während der Inhalt div füllt den Raum dazwischen nahtlos aus und passt sich unterschiedlichen Bildschirmhöhen an.

Das obige ist der detaillierte Inhalt vonWie fülle ich den Raum zwischen Kopf- und Fußzeile mithilfe von Flexbox mit Divs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!