Question

我正在努力使Flexbox设计工作。我不是HTML / css专家。：（

我有一个固定页眉和页脚的Flexbox设计和内容占据了页面的其余可用空间。

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

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

有几天我经常尝试并阅读了很多但却无法正常工作。如何在可滚动内容区域内创建div占据整个空间（高度）？

Answer 1

您可以这样做：

＆＃13;

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}

＆＃13;

<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>

＆＃13;

Answer 2

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

让我们在内容部分调用这些元素＆＃34; slide＆＃34; s。

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

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

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

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

2 个答案: