webentwicklung-frage-antwort-db.com.de

Flexbox mit fester Kopf- und Fußzeile und scrollbarem Inhalt

Ich versuche, ein Flexbox-Design zum Laufen zu bringen. Ich bin kein HTML/CSS-Experte. :(

Ich habe ein Flexbox-Design mit fester Kopf- und Fußzeile und Inhalten, das den Rest der verfügbaren Immobilien der Seite belegt.

Wenn ich Daten in den Inhaltsbereich stecke, die länger als der verfügbare Platz sind, wird der Inhalt gescrollt. Aber ich möchte etwas anderes erreichen.

Ich möchte mehrere divs (untereinander) im Inhaltsbereich haben, und jedes div sollte so hoch wie der Inhaltsbereich sein (auch wenn der Inhalt klein ist), so dass ich eine Art Paging im Inhaltsbereich habe.

Ein paar Tage habe ich viel ausprobiert und viel gelesen, kann es aber nicht zum Laufen bringen. Wie kann ich machen, dass ein div innerhalb des scrollbaren Inhaltsbereichs den gesamten Raum (Höhe) einnimmt?

6
ScubaInstructor

Sie können so etwas tun:

html, body {
  margin: 0;
  height: 100%; /* can also use viewport units (height: 100vh) */
}

#container {
  display: flex; /* displays flex-items (children) inline */
  flex-direction: column; /* stacks them vertically */
  height: 100%; /* needs to take the parents height, alternative: body {display: flex} */
}

main {
  flex: 1; /* takes the remaining height of the "container" div */
  overflow: auto; /* to scroll just the "main" div */
}

section {
  height: 100%; /* takes the visible area of the "main" div */
  overflow: auto; /* recommended */
  border-bottom: 1px solid;
  background: lightgreen;
}

header {background: #f88}
section:last-child {border: none}
footer {background: lightblue}
<div id="container">
  <header>top</header>
  <main>
    <section>1st</section>
    <section>2nd</section>
    <section>3rd<br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
    </section>
    <section>4th</section>
    <section>5th</section>
  </main>
  <footer>bottom</footer>
</div>

12
VXp

Es scheint, als würden Sie mehrere Elemente im Inhaltsbereich haben, die im Wesentlichen die gesamte Seite in der Größe belegen, die Sie jedoch durchblättern können.

Nennen wir diese Elemente im Inhaltsbereich "Folien".

Der einfachste Weg, dies zu erreichen, besteht darin, die minimalen Abmessungen dieser Elemente festzulegen, etwa 

.content .slide {
  min-width:100vw;
  min-height:100vh;
}

Dadurch wird sichergestellt, dass selbst wenn der Inhalt der Folie nicht den gesamten Platz einnimmt, die volle Größe erhalten bleibt.

1