Question

我一直在努力学习一些关于CSS flexboxes的东西，特别是为了让粘性页脚工作，基于this example。

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

example page正如我所期望的那样工作，并且我已经密切关注示例CSS（使用Autoprefixer's live demo）。比较Web检查器中的页面，flexbox CSS看起来是一致的，唯一（看似）相关的区别是示例中的实时代码使用min-height: 100%用于flexbox容器，而我的（和给出的示例代码）使用min-height: 100vh（使用100%对我来说根本不起作用。）

所以我的问题是：示例网站做什么不同，我的不是，为什么？其次，为什么min-height的百分比为1，而只有视口单位为另一个？

我的代码（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>

Answer 1

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

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

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

1 个答案: