flexbox 垂直居中加上一个粘性页脚

Question

我在我的页面上经常使用 flexbox。我在间隔开的 6 张图像上使用它，效果很好。

这是包装在一个容器中（粉红色背景）。我希望它垂直和水平对齐窗口。我让它工作正常。直到我在我的 flexbox 粘性页脚中添加。我不能让它们同时工作。

我的主要问题是 safari，让粘性页脚在其中工作。 我在.container 类上使用flex: 1 0 auto;。

如果我将值更改为 flex: 1; 它居中，但页脚在 safari 中无法正常工作

任何人都可以对此有所了解。我以前从未使用过 flexbox

https://codepen.io/gorelegacy/full/dXzbmK/

Answer 1

你能更准确一点吗？对我来说，它在您的 Codepen 中运行良好。还是粉红色背景（在大屏幕上显示一些黑色）是问题所在？

一个建议，可能不是您的解决方案： Flexbox 用于定义布局。我看到你给身体一个 flex-direction: 行，你给一些元素一个固定的高度。 而不是使用

.bottom {
  height: 40px;
}

我推荐使用：

flex: 0 0 40px;

结果是一样的，但它可以防止将来出现小错误或奇怪的行为。您的 div class=top 也是如此。

关于您的问题，尝试以下方法：

body {
display: flex;
flex-direction: column;
}

.top {
    flex: 0 0 40px;
}

.content {
    flex: 1;
    overflow-y: scroll;
}

.bottom {
    flex: 0 0 40px;
}

确保您的 .top、.bottom 和 .content 是 HTML 中唯一且直接的子级。否则这是行不通的。

这样顶部和底部栏是固定的，您的内容会填满中间的空间。

编辑： 要垂直对齐<div class="content"> 中的内容，您应该将其添加到您的 css。 （连同上面的代码）

.content {
    flex: 1;
    overflow-y: scroll; //only if you want fixed footer
    display: flex;
    flex-direction: row; //column should also do fine, since you only have one child element
    justify-content: center;
    align-items: center;
}

.content-inner { //the only and direct child of content
    margin: auto;
}