为什么我的 Flexbox 粘滞页脚在 Safari 中不起作用？答案

【问题标题】：Why Does My Flexbox Sticky Footer Not Work in Safari?为什么我的 Flexbox 粘滞页脚在 Safari 中不起作用？
【发布时间】：2014-07-01 18:45:47
【问题描述】：

我一直在尝试学习一些关于 CSS flexbox 的知识，特别是让粘性页脚工作，基于 this example。

布局是 3 个基本 div：页眉、主要内容和页脚。主要内容 div 应该垂直扩展，以便页脚始终位于页面底部。在 Safari 中，页面按预期加载，但 vertically 调整窗口大小不会调整布局的高度（ie 什么都没有移动）——如果我让窗口更高，主要内容 div 中的额外空间不会改变以将页脚保持在底部，同样 . 水平地调整窗口大小确实会正确地重排页面。在 Chrome 中一切正常。

example page 按我的预期工作，并且我密切关注示例 CSS（使用 Autoprefixer's live demo）。比较 web 检查器中的页面，flexbox CSS 似乎是一致的，唯一（看似）相关的区别是示例中的实时代码使用 min-height: 100% 作为 flexbox 容器，而我的（以及给出的示例代码）使用 @ 987654327@（使用100%对我来说根本不起作用）。

所以我的问题是：示例网站与我的不同之处在哪里，为什么？其次，为什么min-height 对一个单位起作用，而对另一个单位起作用？

我的代码（also on jsfiddle）：

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox Header Test</title>
    <style type="text/css">
        body {
            font-family: Avenir, sans-serif;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            padding: 0;
            margin: 0;
            min-height: 100vh;
        }

        div {
            width: 100%;
        }
        div p {
            margin-left: 1em;
            margin-right: 1em;
        }
        div.header {
            background-color: orange;
            text-align: center;
        }
        div.main {
            background-color: grey;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }
        div.footer {
            color: white;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
<div class="main">
<p>Lots of text here</p>

</div>
<div class="footer">
<p>Footer text here</p>
</div>
</body>
</html>

【问题讨论】：

标签： css safari flexbox

【解决方案1】：

感谢site I took the example from 的developer 的帮助，我发现了问题的原因：html 元素没有设置任何高度，因此body 上的min-height 没有'没有任何影响。设置 html { height: 100%; } 会产生预期的行为。

诚然，我仍然不完全理解 为什么 导致初始布局和水平调整大小起作用的原因，但垂直调整大小不起作用，但这至少解决了问题。开发人员提出了一些建议，即 Safari 存在与使用 vh 测量相关的一些错误，所以可能就是这样。如果有人能对这个问题有所了解，一定要去做。

【讨论】：

你刚刚让我头疼得厉害。格拉齐。
感谢您跟进您的解决方案！
这是有道理的，但我确实没有自己考虑过。刚刚花了 1 小时仔细检查我的代码，却没有得到任何结果。