Lösung der raumfüllenden Div-Platzierung zwischen Kopf- und Fußzeile

Beim Übergang von Tabellen- zu div-basierten Layouts entsteht eine gemeinsame Hürde: die Gewährleistung zusammenhängender und reaktionsfähiger Abstände zwischen Kopf-, Inhalts- und Fußzeilen-Divs. Hier ist ein zuverlässiger Ansatz mit Flexbox:

Flexbox-Lösung

Flex-Layout ermöglicht Ihnen die dynamische Raumverteilung und ermöglicht natürliche Kopf- und Fußzeilenhöhen, während der Inhalt den verbleibenden Bereich nahtlos ausfüllt. Dies ahmt das intuitive Verhalten nativer mobiler Apps nach, bei denen Kopf- und Fußzeilen an den oberen und unteren Rändern des Ansichtsfensters angebracht werden und der Inhalt innerhalb des Hauptabschnitts scrollbar bleibt.

HTML- und CSS-Implementierung

Der folgende Code demonstriert die Lösung:

  

    ...
  
  

    ...
  
  
  

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

Durch die Nutzung der Flexibilität von Flexbox können Sie den Platz auf Ihrer Webseite elegant und reaktionsschnell zuweisen und so unabhängig von der Bildschirmauflösung ein optimales Benutzererlebnis gewährleisten.