具有固定页眉，页脚和可滚动内容的响应式网格布局

Question

我正在尝试使用flexbox创建2列全高设计。当我向整个中间部分添加滚动时，我有一个奇怪的行为。如果父容器有滚动条，则flex-grow / stretch似乎不会增长/拉伸其他项目。

这是我的fiddle。代码也在下面给出：

html, body {
    height: 100%;    
}
#container {
    display: flex;
    flex-direction: column;
    height: 100%;
    
    width: 50%;
    background-color: red;
}

#container header {
    background-color: gray;
}
#container section {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}
#container footer {
    background-color: gray;
}
aside {
  width : 100px;
  background-color: blue;
}
article{
  width: 100%;
  display:flex;
  flex-direction: column;
}
article > div{
  flex: 1 1 auto;
}

#content {
  display:flex;   
}

<section id="container" >
<header id="header" >This is a header</header>
<section id="content">
  <aside>
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
  </aside>
  <article id="article" >
    <div>               
      This is the content that
      <br />
      With a lot of lines.
      <br />
      With a lot of lines.
      <br />
      This is the content that
      <br />
      With a lot of lines.
      <br />
      <br />
      This is the content that
      <br />
      With a lot of lines.
      <br />
      <br />
      This is the content that
      <br />
      With a lot of lines.
      <br />
    </div>
    <footer id="footer" >This is a page footer</footer>      
  </article>
</section>
<footer id="footer" >This is a footer</footer>
</section>

基本上我试图涵盖2个场景。如果我不需要滚动它可以正常工作但是一旦我滚动了项目没有正确伸展：

Answer 1

使这个布局在最新的Firefox＆amp;截至今天的Chorme（从2016年开始修改这个答案），我做了以下修改：

1. 将margin: 0添加到body，以允许container弯曲到视口高度。

2. 将另外#content的{​​{1}}元素上的内容包裹起来，并将其设为列 flexbox。

3. 将内部section设为全高度弹性框，并提供section和min-height: max-content。

见下面的演示：

flex: 1

html,
body {
  height: 100%;
  margin: 0; /* ADDED */
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 50%;
  background-color: red;
}

#container header {
  background-color: gray;
}

#container > section { /* ADDED > selector */
  display: flex; /* ADDED */
  flex-direction: column; /* ADDED */
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0px;
}

#container > section > section{ /* ADDED */
  display: flex;
  height: 100%;
  min-height: max-content; /* fixes chrome */
  flex: 1; /* fixes firefox */
}

#container footer {
  background-color: gray;
}

aside {
  width: 100px;
  background-color: blue;
  min-height: content;
}

article {
  width: 100%;
  display: flex;
  flex-direction: column;
}

article>div {
  flex: 1 1 auto;
}

以上解决方案充其量只是 hacky ，并向我们展示了为什么Flexbox在2D布局中弱。答案是它不是为它而设计的。但CSS Grids是 - 看看一切都很容易落实到位：

1. 使<section id="container"> <header id="header">This is a header</header> <section id="content"> <section> <aside> test<br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> </aside> <article id="article"> <div> This is the content that <br /> With a lot of lines. <br /> With a lot of lines. <br /> This is the content that <br /> With a lot of lines. <br /> <br /> This is the content that <br /> With a lot of lines. <br /> <br /> This is the content that <br /> With a lot of lines. <br /> </div> <footer id="footer">This is a page footer</footer> </article> </section> </section> <footer id="footer">This is a footer</footer> </section>成为一个完整的视口高网格元素。

2. 将中间 #container 网格容器与section以及 overflow 属性一起设置为您差不多完成了。

见下面的演示：

grid-template-columns: 100px 1fr

body {
  margin: 0;
}

#container {
  display: grid;
  width: 50%;
  height: 100vh;
  background-color: red;
}

header, footer {
  background-color: gray;
}

#container section {
  display: grid;
  grid-template-columns: 100px 1fr;
  overflow-y: auto;
}

aside {
  background-color: blue;
}

article {
  display: flex;
  flex-direction: column;
}

article > div {
  flex: 1 1 auto;
}