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

Question

我知道这个主题是满口的,但我找不到一个更好的方式来描述它.

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

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

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;
}

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