极客观点
项目管理
HarmonyOS
在 iOS Safari 上，当我创建一个 div 是一个弹性项目并使其成为一个弹性容器时，它的高度不会拉伸以匹配其内容。然而，如果它不是一个弹性容器，那么它的高度会拉伸以匹配它的内容。
详细说明 - 我正在使用 css flexbox 在页面底部放置一个页脚。页面正文有两个 div - “maincontents”和“footer”。即使“maincontents”div 内容很少或没有内容，页脚仍将位于窗口底部。如果“maincontents”div 内容很多，它可以根据需要将页脚向下推。这个想法很容易在 flexbox 中实现，方法是将页面主体设为 flex 容器，并将“maincontents”设置为“flex:1”，将“footer”设置为“flex:0”，这样“maincontents”会占用所有可用空间，同时“页脚”被推到窗口的底部。它适用于所有现代浏览器，包括 iOS safari。
如果我也将“maincontents”设为 flexbox 本身（使用 display:flex），就会出现问题。在 iOS Safari 上，页脚现在始终位于窗口底部，即使 maincontents 有很多内容应该将页脚向下推；相反，“主要内容”最终在“页脚”下方继续，而不是将其向下推。
我已经在 jsfiddle 上制作了一个准系统模型。 https://jsfiddle.net/8xs1rocu/
如果您在窗口桌面 (chrome/ff/ie11) 上打开该小提琴，您会看到以下内容 
如果您在 ipad 或 iphone (safari) 上打开它，您会看到以下内容。 
请注意，在 iOS safari 上，页脚不会被内容压低，而内容最终会位于其下方。这不会发生在桌面上的 Chrome/FF/IE11 上；在那些浏览器上，页脚被“主要内容”的内容向下推。
如果您删除“display:flex”行，那么它也可以在 ios safari 上完美运行，就像在其他浏览器上一样。但是我需要“display:flex”行，因为我会将其他内容放在“maincontents”中，这些内容需要使用 css flexbox 以某种方式进行布局。
直接在此处粘贴 jsfiddle 片段代码：
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
.maincontents {
flex: 1;
display: flex; /* if you remove this line it works on Safari */
}
.footer {
flex: 0;
background-color: green;
}
<html>
<head></head>
<body>
<div class="maincontents">
Main contents1 <br />
Main contents2 <br />
Main contents3 <br />
Main contents4 <br />
Main contents5 <br />
Main contents6 <br />
Main contents7 <br />
Main contents8 <br />
Main contents9 <br />
Main contents10 <br />
Main contents11 <br />
Main contents12 <br />
</div>
<div class="footer">
Footer1 <br />
Footer2 <br />
Footer3 <br />
Footer4 <br />
Footer5 <br />
Footer6 <br />
Footer7 <br />
</div>
</body>
</html>
原文由 Gary 发布，翻译遵循 CC BY-SA 4.0 许可协议
只需将
margin-top: auto;添加到页脚即可。这将导致它粘在容器底部。