ios - ios上带有flexbox的粘性页脚
<p><p>我正在尝试使用 flexbox 创建一个粘性页脚，以下内容适用于除 iPhone 之外的任何地方 - 它适用于桌面 Edge/FF/Chrome 和 Android 上的 Chrome；它不适用于任何 iPhone 浏览器(它们都使用相同的渲染引擎，所以不足为奇)。它会显示一个 1000 像素高的橙色框，其中包含单词“MAIN”，然后是一个包含“after main”的红色区域，然后是一个包含“FOOTER”的蓝色区域。</p>
<p>在 iPhone 上，红色区域缺失，整个蓝色页脚显示在屏幕上。看起来 flex-column 的第一个和最后一个元素附加到屏幕的顶部/底部(而不是列的顶部/底部)。</p>
<p>有没有办法让它在 iPhone 上也能正常工作？</p>
<p>我正在安装最新 iOS 更新的 iPhone 6 Plus 上进行测试。</p>
<pre><code><!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>
</code></pre>
<p>这是一个 PEN (<a href="http://codepen.io/thebjorn/pen/qZRBdL" rel="noreferrer noopener nofollow">http://codepen.io/thebjorn/pen/qZRBdL</a>)，展示了我想要在整个页面上完成的任务。在高度为 200px 的主注释中查看内容高于容器时的行为。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>Z.Neeson 对 <a href="https://stackoverflow.com/questions/14962468/flexbox-and-vertical-scroll-in-a-full-height-app-using-newer-flexbox-api" rel="noreferrer noopener nofollow">Flexbox and vertical scroll in a full-height app using NEWER flexbox api</a> 的评论似乎在这里适用，因为添加此规则修复了它:</p>
<pre><code> .body-content, footer {
flex-shrink: 0;
}
</code></pre></p>
<p style="font-size: 20px;">关于ios - ios上带有flexbox的粘性页脚，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/36036772/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/36036772/
</a>
</p>
页:
[1]