我正在尝试使用 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;
}
关于ios - ios上带有flexbox的粘性页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36036772/
| 欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/) | Powered by Discuz! X3.4 |