问题描述
我正在尝试使用flexbox创建2列全高设计.当我将滚动添加到整个中间部分时,我会有一个奇怪的行为.如果父容器具有滚动条,则flex-grow/stretch似乎不会增长/拉伸其他项目.
I'm trying to create 2 column full height design by using flexbox. When I add scrolling to whole middle part then I have a strange behavior. It seems that flex-grow/stretch doesn't grow/stretch other items if parent container has a scrollbar.
这是我的小提琴.代码也如下所示:
Here is my fiddle. Code also given below:
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种情况.如果我不需要滚动,则效果很好,但是一旦滚动,项目将无法正确拉伸:
Basically i'm trying to cover 2 scenarios. It works fine if i don't need to scroll but once i have a scroll the items doesn't stretch correctly:
推荐答案
要使此布局在最新的Firefox&截止到今天,Chorme(从2016年开始修改此答案)进行了以下更改:
To make this layout work in latest Firefox & Chorme as of today (revising this answer from 2016), I made the following changes:
-
在
body
中添加了margin: 0
,以允许container
弯曲到视口高度.
Added
margin: 0
tobody
to allow thecontainer
to flex to the viewport height.
将内容包裹在另一个section
中的#content
元素上,并将其设置为 column flexbox.
Wrap you the contents on #content
element in another section
and make it a column flexbox.
使内部section
一个全高Flexbox并提供min-height: max-content
和flex: 1
.
Make the inner section
a full-height flexbox and give min-height: max-content
and 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 ,它向我们展示了为什么弹性盒在2D布局中弱.答案是它不是专门为它设计的.但是 CSS Grids
是-看看一切都变得容易到位:
The above solution is hacky at best and shows us why a flexbox is weak in 2D layouts. The answer is it is just not designed for it. But CSS Grids
are - see how easily everything falls into place:
-
使
#container
为完整视口的 grid 元素.
使用grid-template-columns: 100px 1fr
和 overflow 属性为 middle section
一个 grid 容器提供一个 grid 容器,您差不多就完成了.
Make the middle section
a grid container with grid-template-columns: 100px 1fr
along with overflow property and you are almost done.
请参见下面的演示
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>
这篇关于具有固定的页眉,页脚和可滚动内容的自适应网格布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!