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

问题描述

我正在尝试进行 flexbox 设计.我不是 HTML/css 专家.:(

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

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

我想在内容区域有几个 div(彼此下方)，每个 div 应该和内容区域一样高(即使内容很小)，所以我在内容区域内有一种分页.

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

解决方案

你可以这样做:

html, body {边距:0；高度:100%；/* 也可以使用视口单位(高度:100vh)*/}#容器 {显示:弹性；/* 显示 flex-items (children) inline */弹性方向:列；/* 垂直堆叠 */高度:100%；/* 需要取父母的高度，替代:body {display: flex} */}主要的 {弹性:1；/* 获取容器"div 的剩余高度 */溢出:自动；/* 只滚动主"div */}部分 {高度:100%；/* 获取主"div 的可见区域 */溢出:自动；/* 受到推崇的 */边框底部:1px 实心；背景:浅绿色；}标题{背景:#f88}部分:最后一个孩子{边界:无}页脚 {background: lightblue}

<header>top</header><主要><节>第一节</节><section>2nd</section><第3节>
Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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.例外 sint occaecat cupidatat non proident, 在 culpa qui offcia deserunt mollit anim id est labourum 中被禁止.<br>Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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.例外 sint occaecat cupidatat non proident, 在 culpa qui offcia deserunt mollit anim id est labourum 中被禁止.<br>Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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.例外 sint occaecat cupidatat non proident, 在 culpa qui offcia deserunt mollit anim id est labourum 中被禁止.<br></节><section>第4</section><section>5th</section></main><页脚>底部</页脚>

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

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.

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.

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

解决方案

You can do something like this:

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