it-swarm.com.ru

Flexbox с фиксированным верхним и нижним колонтитулами и прокручиваемым содержимым

Я пытаюсь заставить дизайн flexbox работать. Я не эксперт по HTML/CSS. :(

У меня есть дизайн flexbox с фиксированным верхним и нижним колонтитулами и содержимым, которое занимает остальную часть доступного пространства страницы.

Когда я помещаю данные в область содержимого, которая длиннее доступного пространства, содержимое прокручивается. Но я хочу добиться другого.

Я хотел бы иметь несколько div (ниже друг друга) в области содержимого, и каждый div должен быть таким же высоким, как и область содержимого (даже если содержимое маленькое), поэтому у меня есть вид подкачки внутри области содержимого.

Пару дней я много пробовал и много читал, но не могу заставить его работать. Как сделать так, чтобы div внутри прокручиваемой области содержимого занимал все пространство (высоту)?

6
ScubaInstructor

Вы можете сделать что-то вроде этого:

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

Похоже, что вы хотите, чтобы несколько элементов в разделе контента, которые в основном занимают всю страницу по размеру, но вы можете прокрутить.

Давайте назовем эти элементы в разделе контента «слайд».

Самый простой способ добиться этого - установить минимальные размеры этих элементов, например: 

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

Это гарантирует, что даже если содержимое слайда не займет все пространство, оно останется в полном размере.

1
Gage Hendy Ya Boy