Wie kann ich mit Flexbox einen DIV mit flüssigem Inhalt zwischen einer festen Kopf- und Fußzeile erstellen?-CSS-Tutorial-php.cn

Wie kann ich mit Flexbox einen DIV mit flüssigem Inhalt zwischen einer festen Kopf- und Fußzeile erstellen?

Patricia Arquette

Freigeben： 2024-11-08 08:17:01

Original

303 Leute haben es durchsucht

How Can I Create a Fluid Content DIV Between a Fixed Header and Footer Using Flexbox?

Erstellen eines fließenden Inhalts-DIV zwischen Kopf- und Fußzeile

Im Streben nach modernem Layoutdesign sind Sie von Tabellen zu Divs übergegangen. Angesichts der Herausforderung, Ihre Kopf-, Fuß- und Inhaltsbereiche auszurichten, suchen Sie nach einer eleganten Lösung, die unterschiedliche Bildschirmauflösungen berücksichtigt.

Erwägen Sie den Flexbox-Ansatz, der eine robuste Lösung für dieses Layout-Dilemma bietet. Durch die Nutzung der inhärenten Funktionen von Flexbox können Sie das gewünschte Ergebnis erzielen: klebrige Kopf- und Fußzeilenelemente mit einem Inhaltsbereich, der den verbleibenden Raum nahtlos ausfüllt und ein reibungsloses Scrollen innerhalb seiner Grenzen ermöglicht.

Flexbox-Implementierung

Die Implementierung von Flexbox ist unkompliziert und erfordert ein paar HTML- und CSS-Anpassungen:

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

Dieses Setup fixiert die Kopf- und Fußzeilenelemente innerhalb ihrer angegebenen Größen, während der Inhaltsbereich dynamisch erweitert werden kann, um den verbleibenden vertikalen Raum auszufüllen. Die overflow-y- und -webkit-overflow-scrolling-Eigenschaften stellen sicher, dass alle Inhalte, die über die Höhe des Inhaltsbereichs hinausgehen, reibungslos innerhalb seiner Grenzen scrollen.

Ergreifen Sie die Flexibilität und Vielseitigkeit der Leistungsfähigkeit von Flexbox und erstellen Sie mühelos harmonische Layouts, die sich nahtlos anpassen zu verschiedenen Bildschirmauflösungen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit Flexbox einen DIV mit flüssigem Inhalt zwischen einer festen Kopf- und Fußzeile erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!