如何使用 flexbox 使用粘性页眉和页脚实现以下标记？

问题描述

我现在正在学习 CSS flexBox，我想实现这个标记：

1. 我希望 header 和 footer 具有“粘性”（header 始终在顶部，footer 始终在底部）。
2. 如果 article 或 aside1 或 aside2 大小不适合页面，我希望页眉和页脚之间的区域可以滚动。

所以我的计划是：

1. 使用 display: flex 和 column direction 为其项目创建容器元素
2. 它将包含 3 个项目：header、footer 和 {aside1、article 和 aside2}，它们将被包装到另一个容器中。
3. 另一个容器将拥有 display: flex 本身和 row direction 作为它的项目：aside、article 和 aside2

我的标记非常简单：

<div class="wrapper">
  <header>This is header</header>
  
  <div class="content">
    <aside>aside1</aside>
    <article>article</article>
    <aside>aside2</aside>
  </div>

  <footer>This is footer</footer>
</div>

这里是样式：

html,body {
  height: 100%;
}

/* Main wrapper,sizes = 100% to fit the viewport */
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  border: solid 1px black;
  flex-direction: column;
}

/* Just some styling,ignore this */
header,article,aside,footer {
  border: solid 1px #888;
  padding: 1rem;
  text-align: center;
}

header {
  background-color: #cfffff;
}

/* flex: 1 makes it "stretch" allowing header and footer
to have their default sizes  */
.content {
  display: flex;
  flex: 1;
  overflow-y: scroll;
}

aside {
  Box-sizing: border-Box;
  vertical-align: top;
  background-color: #cfffcf;
  width: 250px;
}

article {
  background-color: #ffcfff;
  flex: 1;
}

footer {
  background-color: #ffffcf;
}

问题是，每当 article 内容溢出容器时，滚动都不是我期望的方式：

我想了解：

1. 为什么会这样？
2. 这样做的正确方法是什么？

解决方法

使用新样式

position: sticky;

html,body {
  height: 100vh;
}

/* Main wrapper,sizes = 100% to fit the viewport */
.wrapper {
  width: 100%;
  display: flex;
  border: solid 1px black;
  flex-direction: column;
}

/* Just some styling,ignore this */
header,article,aside,footer {
  border: solid 1px #888;
  padding: 1rem;
  text-align: center;
}

header {
  background-color: #cfffff;
  position: sticky;
  top:0;
}

/* flex: 1 makes it "stretch" allowing header and footer
to have their default sizes  */
.content {
  display: flex;
  flex: 1;
}

aside {
  box-sizing: border-box;
  vertical-align: top;
  background-color: #cfffcf;
  width: 250px;
}

article {
  background-color: #ffcfff;
  flex: 1;
}

footer {
position: sticky;
bottom:0;
  background-color: #ffffcf;
}

<div class="wrapper">
  <header>This is header</header>
  
  <div class="content">
    <aside>aside1</aside>
    <article>article</article>
    <aside>Lorem ipsum dolor sit amet,consetetur sadipscing elitr,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet,no sea takimata sanctus est Lorem ipsum dolor sit amet.</aside>
  </div>

  <footer>This is footer</footer>
</div>