Question

我正在尝试使用flexbox创建一个粘性页脚，除了iPhone之外，以下任何地方都可以使用 - 它适用于Android上的桌面Edge / FF / Chrome和Chrome;它不能在任何iPhone浏览器上运行（它们都使用相同的渲染引擎，因此不足为奇）。它显示一个1000px高的橙色框，其中包含单词＆＃34; MAIN＆＃34;，后跟一个红色区域，其中包含＆＃34;在主＆＃34;后面是一个包含＆＃34; FOOTER＆＃34;的蓝色区域。

在iPhone上缺少红色区域，整个蓝色页脚显示在屏幕上。看起来flex-column的第一个和最后一个元素附加到屏幕的顶部/底部（而不是列的顶部/底部）。

有没有办法让它在iPhone上运行？

我在安装了最新iOS更新的iPhone 6 Plus上进行测试。

<!doctype html>
<html lang="nb-NO">
<head>
    <style>
        html, body { height: 100%; margin:0; padding:0; box-sizing: border-box; font-size: 1cm; }
        .body-content { background-color: red; }
        main { background-color: orange; }
        footer { background-color: blue; }

        /* combined height greater than window height */
        main { height: 1000px; }
        footer { min-height: 600px; }

        body {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <div class="body-content">
        <main>MAIN</main>
        <p>after main</p>
    </div>
    <footer>FOOTER</footer>
</body>
</html>

这是一个PEN（http://codepen.io/thebjorn/pen/qZRBdL），展示了我想在整个页面上完成的任务。使用高度200px在main中进行注释，以查看内容高于容器时的行为。

Answer 1

Z.Neeson对Flexbox and vertical scroll in a full-height app using NEWER flexbox api的评论似乎适用于此，因为此规则的添加修复了它：

    .body-content, footer {
        flex-shrink: 0;
    }

Answer 2

您在html，body元素上设置了一个高度。取消html / body的高度将其修复为Safari响应式设计模式（暂时无法检查设备，但这应该贯穿始终）。 e.g。

html, body {margin:0; padding:0; box-sizing: border-box; font-size: 1cm; }

阅读本文关于视口和窗口之间的区别，它应该有助于您的理解

http://www.quirksmode.org/mobile/viewports.html

在ios上使用flexbox的粘性页脚

2 个答案: