html - 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 用于定义布局。我看到你给 body 一个 flex-direction: row，你给一些元素一个固定的高度。 而不是使用

.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;
}