ios上带flexbox的粘性页脚
我正在尝试使用flexbox创建一个粘性页脚，除了iPhone之外，以下内容在任何地方都可以使用——它可以在desktop Edge/FF/Chrome和Android上的Chrome上使用；这在任何iPhone浏览器上都不起作用，因为它们都使用相同的渲染引擎，所以不足为奇。它显示一个1000px高的橙色框，其中包含单词MAIN，后面是一个红色区域，其中包含MAIN，后面是一个蓝色区域，其中包含FOOTER 在iPhone上，红色区域缺失，整个蓝色页脚显示在屏幕上。看起来flex列的第一个和最后一个元素连接到屏幕的顶部/底部，而不是列的顶部/底部 有没有办法让它也在iPhone上运行 我正在安装最新iOS更新的iPhone6Plus上进行测试ios上带flexbox的粘性页脚,ios,css,iphone,flexbox,Ios,Css,Iphone,Flexbox,我正在尝试使用flexbox创建一个粘性页脚，除了iPhone之外，以下内容在任何地方都可以使用——它可以在desktop Edge/FF/Chrome和Android上的Chrome上使用；这在任何iPhone浏览器上都不起作用，因为它们都使用相同的渲染引擎，所以不足为奇。它显示一个1000px高的橙色框，其中包含单词MAIN，后面是一个红色区域，其中包含MAIN，后面是一个蓝色区域，其中包含FOOTER 在iPhone上，红色区域缺失，整个蓝色页脚显示在屏幕上。看起来flex列的第一个和最后
<!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>
这是一支笔，展示了我想在整页上完成的事情。用高度200px在main中进行注释，以查看内容高于容器时的行为。您正在设置html主体元素的高度。去掉html/body的高度可以在Safari响应式设计模式下修复它，目前无法在设备上进行检查，但这应该会持续下去。e、 g
html, body {margin:0; padding:0; box-sizing: border-box; font-size: 1cm; }
.body-content, footer {
flex-shrink: 0;
}
如果我省略了html上的高度，当主/页脚的组合高度小于屏幕高度时，页脚不再位于屏幕底部，例如，将main设置为height:400px；我不完全明白你的意思？你的意思是你想一直保持屏幕的高度，而页脚总是在屏幕的折叠下面吗？如果是这样的话，将main设置为main{height:100vh；}应该会有帮助。不，我希望页脚始终位于列的底部，如果列比窗口短，则调整content:space-between；应该这样做。主体内容与屏幕顶部齐平，页脚与屏幕底部齐平，它们之间有空白。我仍然认为是主体元素的使用让你搞砸了。在你的笔里试试这个，去掉身体高度，一切都很好。为什么不从笔中添加.body div作为内容的包装，并将其作为正文的第一个子项呢。只有当元素之间有空格时，空格between才会显示空格。画笔中的body类表示窗口，这就是它具有精确高度和溢出声明的原因。间隔空间应在容器中的所有项目之间平均添加容器中的剩余空间。