- 首页
- 前端开发
- 如何制作粘性页脚并仍然能够制作可滚动的 flexbox 内容?
如何制作粘性页脚并仍然能够制作可滚动的 flexbox 内容?
[英] How to do a sticky footer and still be able to do scrollable flexbox content?
本文介绍了如何制作粘性页脚并仍然能够制作可滚动的 flexbox 内容?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试实现
如您所见,红色区域是可滚动的(min-height: 300px
).请注意,即使视口不小于红色区域的最小高度 + 蓝色区域,页脚也在屏幕外.
有没有办法在做一个粘性页脚的同时仍然使用 flexbox flex: 1
和可滚动内容?
更新
这是另一张图片,代表我在尝试完成这项工作时面临的另一个大问题:
解决方案
有没有办法做一个粘性页脚并且仍然使用 flexbox flex: 1带有可滚动的内容?
是的,你需要的是一直使用 Flexbox.
因此,不要在 article-1
/card
上使用 min-height
/height
,而是更改它们的 CSS对此:
.article-1 {弹性:1;显示:弹性;最小高度:0;/* 添加,i.a Firefox 需要这个 */}.卡片 {溢出:自动;}
注意,我还删除了一些不需要的属性,主要是因为它们被设置为默认值,并添加了一些.以及为什么需要 min-width
,这里有很好的解释:
更新小提琴
堆栈片段
html, body{高度:100%;边距:0;字体粗细:粗体;}.header {位置:绝对;高度:40px;背景颜色:灰色;z-索引:1;宽度:100%;}.内容 {显示:弹性;弹性方向:列;高度:100%;填充顶部:40px;box-sizing: 边框框;/* 添加 */}.裹 {弹性:1;显示:弹性;弹性方向:列;最小高度:0;/* 添加,i.a Firefox 需要这个 */}.容器 {弹性:1;填充:10px;box-sizing: 边框框;/* 添加 */显示:弹性;弹性方向:列;最小高度:0;/* 添加,i.a Firefox 需要这个 */}.第1条 {弹性:1;显示:弹性;最小高度:0;/* 添加,i.a Firefox 需要这个 */}.卡片 {溢出:自动;}.card-text {高度:2000px;宽度:2000px;背景颜色:红色;}.article-2 {弹性:无;高度:40px;背景颜色:蓝色;}.页脚{位置:相对;高度:40px;背景颜色:灰色;}
<div class="内容"><div class="wrap"><div class="容器"><div class="article-1"><div class="card"><div class="card-text">可滚动的 flex: 1 div
1.可滚动<br>2.可滚动<br>3.可滚动<br>4. 等等...
<div class="article-2">flex: 无 div
<div class="footer">Footer</div>
<小时>根据评论更新
如果需要article-1
有一个最小高度,并且避免绝对定位,可以在content
上设置一个最小高度为好吧,在较小的屏幕上将 footer
进一步向下推.
更新小提琴 2
堆栈片段
html, body{高度:100%;边距:0;字体粗细:粗体;}.header {位置:绝对;高度:40px;背景颜色:灰色;z-索引:1;宽度:100%;}.内容 {显示:弹性;弹性方向:列;高度:100%;最小高度:450px;/* 添加 */填充顶部:40px;box-sizing: 边框框;/* 添加 */}.裹 {弹性:1;显示:弹性;弹性方向:列;最小高度:0;/* i.a Firefox 需要这个 */}.容器 {弹性:1;填充:10px;box-sizing: 边框框;/* 添加 */显示:弹性;弹性方向:列;最小高度:0;/* i.a Firefox 需要这个 */}.第1条 {弹性:1;显示:弹性;最小高度:300px;/* 改变了 */}.卡片 {溢出:自动;}.card-text {高度:2000px;宽度:2000px;背景颜色:红色;}.article-2 {弹性:无;高度:40px;背景颜色:蓝色;}.页脚{位置:相对;高度:40px;背景颜色:灰色;}
<div class="内容"><div class="wrap"><div class="容器"><div class="article-1"><div class="card"><div class="card-text">可滚动的 flex: 1 div
1.可滚动<br>2.可滚动<br>3.可滚动<br>4. 等等...
<div class="article-2">flex: 无 div
<div class="footer">Footer</div>
I'm trying to achieve the sticky footer (flexbox version). However, I'm unable to find a working solution if I also want the ability to have scrollable content inside a flex: 1
div (which requires parents to have height: 100%
).
Here's a fiddle to demonstrate the problem:
https://jsfiddle.net/gfaqLh42/6/
As you can see, the red area is scrollable (with a min-height: 300px
). Notice the footer is offscreen even though the viewport is not less than the red area's min-height + blue area.
Is there a way to do a sticky footer and still use flexbox flex: 1
with scrollable content?
Update
Here's another picture to represent the other big problem I face in trying to make this work:
解决方案
Is there a way to do a sticky footer and still use flexbox flex: 1
with scrollable content?
Yes, and what you need is to use Flexbox all the way.
So instead of using min-height
/height
on article-1
/card
, change their CSS to this:
.article-1 {
flex: 1;
display: flex;
min-height: 0; /* added, i.a Firefox need this */
}
.card {
overflow: auto;
}
Note, I also remove some properties not needed, mainly as they were set to their defaults, and added some. And why the need of min-width
, is well explained here:
Updated fiddle
Stack snippet
html, body{
height: 100%;
margin: 0;
font-weight: bold;
}
.header {
position: absolute;
height: 40px;
background-color: grey;
z-index: 1;
width: 100%;
}
.content {
display: flex;
flex-direction: column;
height: 100%;
padding-top: 40px;
box-sizing: border-box; /* added */
}
.wrap {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0; /* added, i.a Firefox need this */
}
.container {
flex: 1;
padding: 10px;
box-sizing: border-box; /* added */
display: flex;
flex-direction: column;
min-height: 0; /* added, i.a Firefox need this */
}
.article-1 {
flex: 1;
display: flex;
min-height: 0; /* added, i.a Firefox need this */
}
.card {
overflow: auto;
}
.card-text {
height: 2000px;
width: 2000px;
background-color: red;
}
.article-2 {
flex: none;
height: 40px;
background-color: blue;
}
.footer {
position: relative;
height: 40px;
background-color: grey;
}
<div class="header">Header</div>
<div class="content">
<div class="wrap">
<div class="container">
<div class="article-1">
<div class="card">
<div class="card-text">
scrollable flex: 1 div<br>
1. scrollable<br>
2. scrollable<br>
3. scrollable<br>
4. etc...
</div>
</div>
</div>
<div class="article-2">
flex: none div
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
Updated based on a comment
If there is a need for the article-1
to have a minimum height, and to avoid absolute positioning on it, a minimum height could be set on content
as well, to push the footer
further down on smaller screens.
Updated fiddle 2
Stack snippet
html, body{
height: 100%;
margin: 0;
font-weight: bold;
}
.header {
position: absolute;
height: 40px;
background-color: grey;
z-index: 1;
width: 100%;
}
.content {
display: flex;
flex-direction: column;
height: 100%;
min-height: 450px; /* added */
padding-top: 40px;
box-sizing: border-box; /* added */
}
.wrap {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0; /* i.a Firefox need this */
}
.container {
flex: 1;
padding: 10px;
box-sizing: border-box; /* added */
display: flex;
flex-direction: column;
min-height: 0; /* i.a Firefox need this */
}
.article-1 {
flex: 1;
display: flex;
min-height: 300px; /* changed */
}
.card {
overflow: auto;
}
.card-text {
height: 2000px;
width: 2000px;
background-color: red;
}
.article-2 {
flex: none;
height: 40px;
background-color: blue;
}
.footer {
position: relative;
height: 40px;
background-color: grey;
}
<div class="header">Header</div>
<div class="content">
<div class="wrap">
<div class="container">
<div class="article-1">
<div class="card">
<div class="card-text">
scrollable flex: 1 div<br>
1. scrollable<br>
2. scrollable<br>
3. scrollable<br>
4. etc...
</div>
</div>
</div>
<div class="article-2">
flex: none div
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
这篇关于如何制作粘性页脚并仍然能够制作可滚动的 flexbox 内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文