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

Question

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

htmlcssflexbox

31

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

我有一个固定头部和底部的 flexbox 设计，内容占据页面其余可用空间。

当我在内容区域放置比可用空间更长的数据时，内容会滚动。但我想实现另一件事情。

我想在内容区域中有几个 div (一个在另一个下面)，每个 div 都应该和内容区域一样高（即使内容很小），这样我就有了内容区域内的分页效果。

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

- ScubaInstructor

2个回答

2

听起来你想要的是在内容区域有多个元素，它们基本上占据整个页面，但是你可以通过滚动来查看它们。

我们称这些内容区域中的元素为“幻灯片”。

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

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

这将确保即使幻灯片内的内容没有占据整个空间，它仍将保持全尺寸。

- Gage Hendy Ya Boy

1

这也解决了我的问题。我在现有的CSS中进行了更改，现在它像魔法一样运行。 - ScubaInstructor

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- VXp · Accepted Answer

您可以像这样做：

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>