我正在尝试使用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的内容，以查看内容高于容器的行为。
最佳答案
Z.Neeson对Flexbox and vertical scroll in a full-height app using NEWER flexbox api的评论似乎在这里适用，因为添加了此规则可以解决此问题:
.body-content, footer {
flex-shrink: 0;
}