具有固定页眉和页脚以及可滚动内容的 Flexbox

Question

我正在尝试制作一个 flexbox 设计。我不是 HTML/css 专家。 :(

我有一个 flexbox 设计，带有固定的页眉和页脚以及占据页面其余可用空间的内容。

当我将数据放入比可用空间长的内容区域时，内容正在滚动。但我想实现不同的目标。

我想在内容区域中有几个 div（彼此下方），每个 div 应该与内容区域一样高（即使内容很小），所以我在内容区域内有一种分页。

几天来，我尝试了很多，阅读了很多，但无法正常工作。如何让可滚动内容区域内的 div 占据整个空间（高度）？

Answer 1

你可以这样做：

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>

Answer 2

听起来你想要的是内容部分中的多个元素，它们基本上占据了整个页面的大小，但你可以滚动浏览。

我们将内容部分中的这些元素称为“幻灯片”。

实现这一点的最简单方法是设置这些元素的最小尺寸，例如 -

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

这将确保即使幻灯片中的内容没有占据整个空间，它也会保持完整大小。