如何做一个粘性页脚并且仍然能够做可滚动的flexbox内容? [英] How to do a sticky footer and still be able to do scrollable flexbox content?
问题描述
我正在尝试实现粘性页脚(flexbox版本).但是，如果我还希望能够在flex: 1 div(要求父母拥有height: 100%)中包含可滚动内容，则无法找到有效的解决方案.
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%).
这里有个小提琴来演示这个问题: https://jsfiddle.net/gfaqLh42/6/
Here's a fiddle to demonstrate the problem: https://jsfiddle.net/gfaqLh42/6/
如您所见，红色区域是可滚动的(带有min-height: 300px).请注意，即使视口不少于红色区域的最小高度+蓝色区域，页脚也处于屏幕外.
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.
是否有一种方法可以使页脚变粘并仍将flexbox flex: 1与可滚动的内容一起使用?
Is there a way to do a sticky footer and still use flexbox flex: 1 with scrollable content?
更新
这是另一幅图片，代表了我在尝试完成这项工作时面临的另一个大问题:
Here's another picture to represent the other big problem I face in trying to make this work:
推荐答案
是否有一种方法可以使页脚变粘并仍使用flexbox flex:1 具有可滚动的内容?
Is there a way to do a sticky footer and still use flexbox flex: 1 with scrollable content?
是的，您需要完全使用Flexbox.
Yes, and what you need is to use Flexbox all the way.
因此，不要在article-1/card上使用min-height/height，而是将其CSS更改为此:
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;
}
注意，我还删除了一些不需要的属性，主要是因为它们已设置为默认值，并添加了一些属性.以及为什么对min-width的需求在这里得到了很好的解释:
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:
堆栈片段
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>
根据评论进行了更新
如果需要article-1具有最小高度，并且避免在其上进行绝对定位，也可以在content上设置最小高度，以将footer进一步向下推至更小屏幕.
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.
堆栈片段
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屋！
