CSS flex box，动态页脚高度和可滚动的主体

Question

我正在尝试使用弹性框构建一个简单的布局。过去我曾经依靠 Javascript 来根据页脚高度调整部分的大小...

section 容器应在需要时显示滚动条：

当部分增长超过页面总可用高度减去页脚高度时。

这在纯 CSS 中可行吗？

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
section {
  /* flex: 1; would be enough but it looks bad in IE */
  flex: 1 0 auto;
  overflow-y: auto;
}
/* Unimportant part */

body {
  font: 16px/1.5 sans-serif;
}
p {
  margin-bottom: 1em;
}
header,
section,
footer {
  padding: 2em;
  color: white;
}
header {
  background-color: #85144B;
}
section {
  background-color: #3D9970;
}
footer {
  background-color: #001F3F;
}
.input {
  border: 1px solid red;
}

<header>
  Here is my fixed header
</header>
<section>
  <p>Bacon ipsum dolor sit amet corned beef turducken jowl chuck, biltong turkey capicola bresaola. Pork strip steak prosciutto ball tip flank frankfurter ham filet mignon jowl pancetta. Shankle kielbasa salami jerky filet mignon kevin. Shankle beef ribs
    ham hock porchetta venison pork tail sausage meatball. Short loin shoulder bresaola frankfurter ball tip spare ribs andouille shank salami ham tongue beef pork chop kevin. Beef turducken biltong sirloin capicola, ribeye short ribs brisket swine shank
    short loin leberkas pig.</p>
  <p>Bacon ipsum dolor sit amet corned beef turducken jowl chuck, biltong turkey capicola bresaola. Pork strip steak prosciutto ball tip flank frankfurter ham filet mignon jowl pancetta. Shankle kielbasa salami jerky filet mignon kevin. Shankle beef ribs
    ham hock porchetta venison pork tail sausage meatball. Short loin shoulder bresaola frankfurter ball tip spare ribs andouille shank salami ham tongue beef pork chop kevin. Beef turducken biltong sirloin capicola, ribeye short ribs brisket swine shank
    short loin leberkas pig.</p>
  <p>Bacon ipsum dolor sit amet corned beef turducken jowl chuck, biltong turkey capicola bresaola. Pork strip steak prosciutto ball tip flank frankfurter ham filet mignon jowl pancetta. Shankle kielbasa salami jerky filet mignon kevin. Shankle beef ribs
    ham hock porchetta venison pork tail sausage meatball. Short loin shoulder bresaola frankfurter ball tip spare ribs andouille shank salami ham tongue beef pork chop kevin. Beef turducken biltong sirloin capicola, ribeye short ribs brisket swine shank
    short loin leberkas pig.</p>
  <p>Bacon ipsum dolor sit amet corned beef turducken jowl chuck, biltong turkey capicola bresaola. Pork strip steak prosciutto ball tip flank frankfurter ham filet mignon jowl pancetta. Shankle kielbasa salami jerky filet mignon kevin. Shankle beef ribs
    ham hock porchetta venison pork tail sausage meatball. Short loin shoulder bresaola frankfurter ball tip spare ribs andouille shank salami ham tongue beef pork chop kevin. Beef turducken biltong sirloin capicola, ribeye short ribs brisket swine shank
    short loin leberkas pig.</p>
  <p>Bacon ipsum dolor sit amet corned beef turducken jowl chuck, biltong turkey capicola bresaola. Pork strip steak prosciutto ball tip flank frankfurter ham filet mignon jowl pancetta. Shankle kielbasa salami jerky filet mignon kevin. Shankle beef ribs
    ham hock porchetta venison pork tail sausage meatball. Short loin shoulder bresaola frankfurter ball tip spare ribs andouille shank salami ham tongue beef pork chop kevin. Beef turducken biltong sirloin capicola, ribeye short ribs brisket swine shank
    short loin leberkas pig.</p>

  <p>Cow ground round ball tip ribeye swine pancetta shank pork loin strip steak bacon pastrami andouille tail sausage short ribs. Porchetta shank pastrami frankfurter ham filet mignon spare ribs doner ground round t-bone venison turkey chicken bacon. Jowl
    landjaeger ribeye, kielbasa tenderloin filet mignon tri-tip shankle ball tip chuck pancetta swine. Pork belly sausage filet mignon short ribs, chuck salami bacon. Jerky fatback tail tongue beef shank.</p>

  <p>IE is trolling me.</p>
</section>
<footer>
  <div class="input" contenteditable="true">INPUT HERE. When I jump lines I want the footer to resize and the main content to show a scroll bar.</div>
</footer>

Answer 1

我在这里找到了你的答案：Flexbox and vertical scroll in a full-height app using NEWER flexbox api

您需要进行一些小的调整 1) 创建一个包装容器 2) 在 body 上使用 height: 100% 3) 使用 flex: 1 1 auto 设置部分

html, body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
}
section {
  flex: 1 1 auto;
  overflow-y: auto;
}

codepen