具有固定的页眉和页脚以及可滚动内容的Flexbox [英] Flexbox with fixed header and footer and scrollable content

问题描述

我正在尝试使flexbox设计工作.我不是HTML/css专家. :(

I am trying to make a flexbox design work. I am not an HTML/css expert. :(

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

I have a flexbox design with fixed header and footer and content that occupies the rest of the available real estate of the page.

当我将数据放入比可用空间长的内容区域中时，内容将滚动.但是我想实现另一件事.

When I put data in the content area which is longer than that available space the content is scrolling. But I want to achieve a different thing.

我希望在内容区域中有几个div(彼此之间)，并且每个div应该与内容区域一样高(即使内容很小)，因此我在内容区域中有一种分页.

I would like to have several divs (below each other) in the content area and each div should be as high as the content area (even if the content is small) so I have a kind of paging inside the content area.

几天来，我尝试了很多，读了很多书，但无法正常工作.如何使可滚动内容区域内的div占据整个空间(高度)?

A couple of days I have tried a lot and read a lot but can't get it working. How can I make a div inside the scrollable content area occupy the whole space (height) ?

推荐答案

您可以执行以下操作:

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>

这篇关于具有固定的页眉和页脚以及可滚动内容的Flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！