带有内部柔性盒容器的柔性盒粘性页脚，带有y轴滚动

Question

我知道这个主题是满口的，但我无法找到更好的方式来描述它。

我有一个标题，内容正文，页脚布局，其中页脚是“粘性的”＃39;使用flex css，效果非常好。我在内容体中有另一个容器需要扩展以填充可用高度，并且当它的内容被追加时，它会滚动。到目前为止，我能够让它工作的唯一方法是将内容体的高度设置为静态px值，这会破坏我所需的垂直响应。

我尝试的Codepen：http://codepen.io/sinrise/pen/QwKPKp

＆＃13;

＆＃13;

html, body {
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */
}
#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#header {
  background: yellow;
  height: 30px;  /* can be variable as well */
}
#body {
  flex: 1;
  border: 1px solid orange;
  padding-bottom: 20px;
}
.content {
  border: 1px solid gray;
  margin: 10px 0 0;
  width: 500px;
  margin: 0 auto;
  overflow-y: scroll;
  height: 200px;
}
.item:nth-child(odd) {
  background: #fbfbfb;
}
#footer{
  background: lime;
}

＆＃13;

<div id="wrapper">
  <div id="header">Title</div>
  <div id="body">
    Body
    <div class="content">
      Content
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
      <div class="item">Item 9</div>
      <div class="item">Item 10</div>
      <div class="item">Item 11</div>
      <div class="item">Item 12</div>
      <div class="item">Item 13</div>
      <div class="item">Item 14</div>
      <div class="item">Item 15</div>
      <div class="item">Item 16</div>
      <div class="item">Item 17</div>
      <div class="item">Item 18</div>
    </div>
  </div>
  <div id="footer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试添加

#body {
    display: flex;
    flex-direction: column;
}
.content {
    height: 0;    /* Reduce the height as much as possible... */
    flex-grow: 1; /* ...but make it fill all remaining space  */
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
#header {
  background: yellow;
  height: 30px;
}
#body {
  flex: 1;
  border: 1px solid orange;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.content {
  border: 1px solid gray;
  margin: 10px 0 0;
  width: 500px;
  margin: 0 auto;
  overflow-y: scroll;
  height: 0;
  flex-grow: 1;
}
.item:nth-child(odd) {
  background: #fbfbfb;
}
#footer {
  background: lime;
}

<div id="wrapper">
  <div id="header">Title</div>
  <div id="body">
    Body
    <div class="content">
      Content
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
      <div class="item">Item 9</div>
      <div class="item">Item 10</div>
      <div class="item">Item 11</div>
      <div class="item">Item 12</div>
      <div class="item">Item 13</div>
      <div class="item">Item 14</div>
      <div class="item">Item 15</div>
      <div class="item">Item 16</div>
      <div class="item">Item 17</div>
      <div class="item">Item 18</div>
    </div>
  </div>
  <div id="footer">
    Footer
    <br/>of
    <br/>variable
    <br/>height
    <br/>
  </div>
</div>

Answer 2

Forked your pen并让它发挥作用。

我改变了什么：

• 在#header和#footer
上设置最低高度和“弹性基础”
• 在#body
上将“flex”更改为“flex-grow”
• ，最重要的是，它不是min-height上的#wrapper，而只是常规的height: 100%;