![the the](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了具有固定页眉、页脚和可滚动内容的响应式网格布局的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用 flexbox 创建 2 列全高设计.当我将滚动添加到整个中间部分时,我有一个奇怪的行为.如果父容器有滚动条,flex-grow/stretch 似乎不会增长/拉伸其他项目.
这是我的
解决方案
为了使这个布局在最新的 Firefox &Chorme 截至今天(从 2016 年开始修改此答案),我进行了以下更改:
向 body
添加 margin: 0
以允许 container
弯曲到视口高度.
将 #content
元素上的内容包装在另一个 section
中,并使其成为 column flexbox.
使内部 section
成为一个全高的 flexbox 并给 min-height: max-content
和 flex: 1
.
见下面的演示:
html,身体 {高度:100%;边距:0;/* 添加 */}#容器 {显示:弹性;弹性方向:列;高度:100%;宽度:50%;背景颜色:红色;}#容器头{背景颜色:灰色;}#容器>部分 {/* 添加 >选择器 */显示:弹性;/* 添加 */弹性方向:列;/* 添加 */弹性:1 1 自动;溢出-y:自动;最小高度:0px;}#容器>部分 >部分{/* 添加 */显示:弹性;高度:100%;最小高度:最大内容;/* 修复铬 */弹性:1;/* 修复火狐 */}#容器页脚{背景颜色:灰色;}在旁边 {宽度:100px;背景颜色:蓝色;最小高度:内容;}文章 {宽度:100%;显示:弹性;弹性方向:列;}文章>div {弹性:1 1 自动;}
<header id="header">这是一个标题</header><section id="内容"><旁边>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/></一边><文章id="文章"><div>这是内容<br/>有很多线.<br/>有很多线.<br/>这是内容<br/>有很多线.<br/><br/>这是内容<br/>有很多线.<br/><br/>这是内容<br/>有很多线.<br/>
<footer id="footer">这是一个页脚</footer></文章></节></节><footer id="footer">这是一个页脚</footer></section>
上述解决方案充其量是hacky,并且向我们展示了为什么 flexbox 在 2D 布局中弱.答案是它不是为它设计的.但是 CSS 网格
是 - 看看一切是多么容易:
使 #container
成为一个完整的视口高度 grid 元素.
使 middle section
成为带有 grid-template-columns: 100px 1fr
的 grid 容器连同 overflow 属性,你就快完成了.
见下面的演示:
body {边距:0;}#容器 {显示:网格;宽度:50%;高度:100vh;背景颜色:红色;}页眉页脚 {背景颜色:灰色;}#容器部分{显示:网格;网格模板列:100px 1fr;溢出-y:自动;}在旁边 {背景颜色:蓝色;}文章 {显示:弹性;弹性方向:列;}文章 >div {弹性:1 1 自动;}
<header id="header">这是一个标题</header><section id="内容"><旁边>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/></一边><文章id="文章"><div>这是内容<br/>有很多线.<br/>有很多线.<br/>这是内容<br/>有很多线.<br/><br/>这是内容<br/>有很多线.<br/><br/>这是内容<br/>有很多线.<br/>
<footer id="footer">这是一个页脚</footer></文章></节><footer id="footer">这是一个页脚</footer></section>
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>
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:
解决方案
To make this layout work in latest Firefox & Chorme as of today (revising this answer from 2016), I made the following changes:
Added margin: 0
to body
to allow the container
to flex to the viewport height.
Wrap you the contents on #content
element in another section
and make it a column flexbox.
Make the inner section
a full-height flexbox and give min-height: max-content
and flex: 1
.
See demo below:
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>
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:
Make #container
a full viewport high grid element.
Make the middle section
a grid container with grid-template-columns: 100px 1fr
along with overflow property and you are almost done.
See demo below:
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>
这篇关于具有固定页眉、页脚和可滚动内容的响应式网格布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!