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

Question

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

这是我的小提琴。 下面还给出了代码：

 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>

基本上我试图涵盖两种情况。 如果我不需要滚动，它工作正常，但是一旦我滚动，项目就不能正确拉伸：

Answer 1

为了使这个布局在今天最新的 Firefox 和 Chorme 中工作（从 2016 年开始修改这个答案），我进行了以下更改：

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

2. 将#content元素上的内容包装在另一个section并使其成为列flexbox。

3. 使内部section成为全高 flexbox 并给出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; }

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

上面的解决方案充其量是hacky并且向我们展示了为什么 flexbox 在 2D 布局中很弱。 答案是它不是为它设计的。 但是CSS Grids是 - 看看一切是多么容易：

1. 使#container成为一个完整的视口高网格元素。

2. 使中间section成为带有grid-template-columns: 100px 1fr和overflow属性的网格容器，您就快完成了。

请参阅下面的演示：

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

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