Html flexbox垂直居中加上粘性页脚

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

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

我的主要问题是safari，让粘脚在里面工作。 我使用

flex:10自动.container

类上的code>

如果我将值更改为

flex:1它居中，但是页脚在safari中不起作用

有人能解释一下吗。我以前从未使用过flexbox

你能再精确一点吗？对我来说，它在你的密码笔里工作得很好。还是粉色背景（在大屏幕上显示一些黑色）是问题所在

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

.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中唯一的直接子项。否则这就行不通了

这样，顶部和底部栏是固定的，您的内容将填充其间的空间

编辑：
要垂直对齐
中的内容，应将其添加到css中。（连同上述代码）

你能再精确一点吗？对我来说，它在你的密码笔里工作得很好。还是粉色背景（在大屏幕上显示一些黑色）是问题所在

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

.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中唯一的直接子项。否则这就行不通了

这样，顶部和底部栏是固定的，您的内容将填充其间的空间

编辑：
要垂直对齐
中的内容，应将其添加到css中。（连同上述代码）

很抱歉让人困惑。我希望它的粉红色内容始终居中对齐。像这样，尝试更改浏览器的高度。它在铬合金中工作。但不是safari，我在这里使用的flex sticky footer与我有冲突——我已经编辑了我的消息。让我知道这是否是您正在寻找的：-）我正在使用safari，在您提供的代码笔中，内容在中心对齐。我不知道那里出了什么问题？safari（相对于chrome）唯一的问题是，当使用大屏幕时，内容中奇怪的黑色部分。垂直对齐？啊，现在我完全知道问题所在了！我将编辑我的帖子：）很抱歉让人困惑。我希望它的粉红色内容始终居中对齐。像这样，尝试更改浏览器的高度。它在铬合金中工作。但不是safari，我在这里使用的flex sticky footer与我有冲突——我已经编辑了我的消息。让我知道这是否是您正在寻找的：-）我正在使用safari，在您提供的代码笔中，内容在中心对齐。我不知道那里出了什么问题？safari（相对于chrome）唯一的问题是，当使用大屏幕时，内容中奇怪的黑色部分。垂直对齐？啊，现在我完全知道问题所在了！我将编辑我的帖子：）可能的指导：可能的指导：