web-dev-qa-db-fra.com

Flexbox avec en-tête et pied de page fixes et contenu déroulant

J'essaie de faire fonctionner une conception de boîte flexible. Je ne suis pas un expert en HTML/CSS. :(

J'ai une conception de boîte souple avec en-tête et pied de page fixes et un contenu qui occupe le reste de l'immobilier disponible de la page.

Lorsque je place des données dans la zone de contenu qui est plus longue que cet espace disponible, le contenu défile. Mais je veux réaliser une chose différente.

Je voudrais avoir plusieurs divs (l'un en dessous de l'autre) dans la zone de contenu et chaque div devrait être aussi haut que la zone de contenu (même si le contenu est petit) afin d'avoir une sorte de pagination à l'intérieur de la zone de contenu.

Quelques jours, j'ai beaucoup essayé et lu beaucoup mais je ne peux pas le faire fonctionner. Comment puis-je faire une div à l'intérieur de la zone de contenu défilable occupe tout l'espace (hauteur)?

htmlcsscss3flexbox
6
ScubaInstructor

Vous pouvez faire quelque chose comme ça:

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

Il semble que ce que vous voulez sont plusieurs éléments dans la section de contenu qui prennent essentiellement la taille de la page, mais que vous pouvez faire défiler.

Appelons ces éléments dans la section de contenu "slide" s.

Le moyen le plus simple d'y parvenir serait de définir les dimensions minimales de ces éléments, par exemple: 

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

Cela garantira que, même si le contenu de la diapositive ne occupe pas tout l'espace, il restera à sa taille maximale.

1
Gage Hendy Ya Boy