flexbox粘性页脚 [英] flexbox sticky footer
问题描述
我正在努力实现与该问题中描述的内容大致相同的内容:
I'm trying to achieve more or less the same of what is described in this question:
除了我不能使用固定的高度.
except for the fact that i can't use fixed heights.
我有两张已经在flex上下文中的卡(它们的高度已通过flexbox拉伸):
I have set of two cards that are already in a flex context (their heights are stretched with flexbox):
在卡片内，我具有一系列要素:
Inside the card I have a series of elements:
- 标题
- 身体
- 页脚(蓝色div)
我想要的是页脚始终固定在底部.
What I want is the footer to always stick to the bottom.
上述三个元素的内部容器具有以下CSS:
The inner container of the three elements described above have the following CSS:
.card-inner {
display:flex;
flex-flow :row wrap;
align-items: stretch;
}
和里面的物品有
.card {
&-header,
&-body {
flex: 0 1 100%;
}
&-footer {
flex: 0 1 100%;
align-self:flex-end;
margin-top: auto;
}
}
我希望align-self:flex-end或margin-top: auto会将页脚div向下推到卡上，但这没有发生.
I would have expected that align-self:flex-end or margin-top: auto would have pushed the footer div down the card, but this is not happening.
也许这两个flex上下文互不互斥且互不相关?还是在内部容器没有高度的情况下，当内容流结束时，flex上下文结束了吗?
Maybe the two flex contexts don't speak to each other and are not related? Or maybe without a height to the inner container, the flex context ends when the content flow ends?
有没有办法在Flexbox中不使用高度来实现这一目标?
Is there a way to achieve this using no heights with flexbox?
这是一个Codepen示例: https://codepen.io/vlrprbttst/pen/QgWbEr
Here's a codepen example: https://codepen.io/vlrprbttst/pen/QgWbEr
推荐答案
将display: flex添加到.card.
这将使孩子们可以使用.container的整个高度.
That will allow the children to use the full height of .container.
它还将页脚固定在底部.
It will also pin the footer to the bottom.
要进行更全面的修复(如有必要)，您需要将.container-inner的flex-direction切换为column，并对弹性项目进行调整以解决此问题.
For a more comprehensive fix (if necessary), you will need to switch the flex-direction of .container-inner to column, and make adjustments to the flex items to account for this switch.
align-self: flex-end和margin-top: auto无效的原因与多行flex容器中的flex行有关.
The reason why align-self: flex-end and margin-top: auto didn't work has to do with the flex lines in a multi-line flex container.
本质上，由于align-content的工作方式，您的页脚无法脱离其弯曲线并移至容器底部.
Essentially, because of the way align-content works, your footer cannot break out of its flex line and shift to the bottom of the container.
有关完整的解释，请参阅这篇文章:
For a complete explanation, see this post:
这篇关于flexbox粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
