Question

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

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

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

纯CSS可以吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

flex: 1 1 auto

codepen

CSS弹性框，动态页脚高度和可滚动主体

1 个答案: