Flexbox：带有粘性页脚的可滚动内容答案

【问题标题】：Flexbox: scrollable content with sticky footerFlexbox：带有粘性页脚的可滚动内容
【发布时间】：2017-03-17 09:20:49
【问题描述】：

我想制作一个盒子（在本例中为弹性项目），它始终位于其容器的中间。在那个框中，有一个页眉、页脚和内容部分。如果内容的高度变得太大，我希望内容部分可以滚动。页眉和页脚应始终可见，并且框应始终保留在其容器中。

这是我能写的：

HTML

<div class="flex-container">
  <div class="flex-item">
     <header>Header</header>
     <div class="content">
        A
      <br>B
      <br>C
      <br>D
      <br>E
      <br>F
      <br>G
      <br>H
      <br>I
      <br>J
      <br>K
     </div>
     <footer>Footer</footer>
  </div>
</div>

CSS

body {
  margin: 120px;
}

.flex-container {
  display: flex;
  width: 200px;
  height: 200px; /* We can assume that the container's height is hardcoded in this example, but the end solution should work even if this value is changed*/
  border: 1px solid black;
  justify-content: center;
}

.flex-item {
  box-sizing: border-box;
  width: 150px;
  border: 5px solid blue;
  align-self: center;
  background-color: red;
  display: flex;
  flex-flow: column;
  max-height: 100%;
}

.content {
  /* It should be possible to scroll this element when it get too big in height*/
  background-color: grey;
  flex: 1;
}

代码托管在 JSFiddle 上：https://jsfiddle.net/9fduhpev/3/

为了直观地解释同一件事，这是当前的情况：

这就是我想要的：

【问题讨论】：

标签： html css flexbox

【解决方案1】：

使用overflow-y: auto;。

阅读：http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

body {
  margin: 120px;
}

.flex-container {
  display: flex;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  justify-content: center;
}

.flex-item {
  box-sizing: border-box;
  width: 150px;
  border: 5px solid blue;
  align-self: center;
  background-color: red;
  display: flex;
  flex-flow: column;
  max-height: 100%;
}

.content {
  background-color: grey;
  flex: 1;
  overflow-y: auto;
}

<div class="flex-container">
  <div class="flex-item">
     <header>Header</header>
     <div class="content">
        A
      <br>B
      <br>C
      <br>D
      <br>E
      <br>F
      <br>G
      <br>H
      <br>I
      <br>J
      <br>K
      <br>L
     </div>
     <footer>Footer</footer>
  </div>
</div>

【讨论】：

实际上我想我会使用overflow-y: auto 来仅在内容变得太大时才显示滚动条。至少在 Windows 上，“滚动”值使滚动条始终可见，这是我不想要的。

【解决方案2】：

我会这样做：

.content {
  height: 100%;
  overflow:auto;
  background-color: grey;
  flex: 1;
}

https://jsfiddle.net/9fduhpev/4/

【讨论】：

【解决方案3】：

我建议你给它overflow: auto。这样它就可以在需要时滚动。

body {
  margin: 20px;
}
.flex-container {
  display: flex;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  justify-content: center;
}
.flex-item {
  box-sizing: border-box;
  width: 150px;
  border: 5px solid blue;
  align-self: center;
  background-color: red;
  display: flex;
  flex-flow: column;
  max-height: 100%;
}
.content {
  background-color: grey;
  flex: 1;
  overflow: auto;
}

<div class="flex-container">
  <div class="flex-item">
     <header>Header</header>
     <div class="content">
        A
      <br>B
      <br>C
      <br>D
      <br>E
      <br>F
      <br>G
      <br>H
      <br>I
      <br>J
      <br>K
      <br>L
     </div>
     <footer>Footer</footer>
  </div>
</div>

【讨论】：