ios上带有flexbox的粘性页脚答案

【问题标题】：sticky footer with flexbox on iosios上带有flexbox的粘性页脚
【发布时间】：2016-07-02 09:32:25
【问题描述】：

我正在尝试使用 flexbox 创建一个粘性页脚，以下内容适用于除 iPhone 之外的任何地方 - 它适用于桌面 Edge/FF/Chrome 和 Android 上的 Chrome；它不适用于任何 iPhone 浏览器（它们都使用相同的渲染引擎，所以不足为奇）。它会显示一个 1000 像素高的橙色框，其中包含单词“MAIN”，然后是一个包含“after main”的红色区域，然后是一个包含“FOOTER”的蓝色区域。

在 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 的主注释中查看内容高于容器时的行为。

【问题讨论】：

标签： ios css iphone flexbox

【解决方案1】：

Z.Neeson 对Flexbox and vertical scroll in a full-height app using NEWER flexbox api 的评论似乎适用于此，因为添加此规则可以解决此问题：

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

【讨论】：

【解决方案2】：

您正在为您的 html、body 元素设置高度。将 html/body 的高度从 Safari 响应式设计模式中修复（目前无法检查设备，但这应该可以继续）。例如

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

阅读这篇文章，了解视口和窗口之间的区别，它应该有助于您理解

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

【讨论】：

如果我在 html 上省略了高度，当 main/footer 的组合高度小于屏幕高度时（例如将 main 设置为 @ 987654323@)
我不是 100% 理解你的意思吗？您的意思是您希望
始终是屏幕的高度，而页脚始终位于屏幕的“折叠”下方？如果是这样，将 main 设置为 main{height: 100vh;} 应该会有所帮助
不，我希望页脚始终位于列的底部，如果列短于窗口，则 justify-content: space-between; 应该启动，以便 .body-content 与屏幕顶部，footer 与屏幕底部齐平，它们之间有空白。
我仍然认为是身体元素的使用让你搞砸了。在你的 Pen 中尝试这个，从 body 类中删除高度，一切正常。为什么不从笔中添加 .body div 作为内容的包装，并将其作为正文的第一个孩子。 space-between 只会在元素之间有空格时显示空格。
笔中的body类代表窗口，这就是为什么它有一个精确的高度和溢出声明。 space-between 应该在容器中布置的所有项目之间平均添加容器中的剩余空间。