如何使用弹性框使页脚停留在页面底部
在 iOS Safari 上，当我创建一个 div 是一个 Flex 项目并使其成为一个 Flex 容器时，它的高度不会拉伸以匹配其内容。然而，如果它不是一个弹性容器，那么它的高度会拉伸以匹配它的内容。
详细说明 - 我正在使用 css flexbox 将页脚放置在页面底部。页面主体有两个 div - “maincontents”和“footer”。即使“maincontents”div 内容很少或没有内容，页脚仍将保留在窗口底部。而如果“maincontents”div内容较多，则可以根据需要将页脚下推。这个想法很容易在 Flexbox 中实现，方法是将页面主体设置为 Flex 容器，并将“maincontents”设置为“flex:1”，将“footer”设置为“flex:0”，这样“maincontents”就会占用所有可用空间，而“页脚”被推到窗口底部。它适用于所有现代浏览器，包括 iOS safari。
如果我也将“maincontents”本身设置为弹性框（使用display:flex），就会出现问题。在 iOS Safari 上，页脚现在始终位于窗口底部，即使 maincontents 有很多内容应该将页脚进一步向下推；相反，“maincontents”最终会在“footer”下方继续，而不是将其向下推。
我在 jsfiddle 上做了一个简单的模型。 https://jsfiddle.net/8xs1rocu/
如果您在 Windows 桌面上打开该小提琴，您会看到以下内容（chrome/ff/ie11）
如果您在 iPad 或 iPhone (Safari) 上打开它，您会看到以下内容。
请注意，在 iOS safari 上，页脚不会被内容向下推，而是内容最终会进入页脚下方。在桌面上的 Chrome/FF/IE11 上不会发生这种情况；在这些浏览器上，页脚由“maincontents”的内容向下推。
如果删除“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>cnl*_*evy 22
只需添加margin-top: auto;到页脚即可。
这将导致它粘在容器的底部。
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
.maincontents {
/* nothing to put here */
}
.footer {
margin-top: auto;
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>经过进一步调查，我找到了解决您问题的方法。通过这些信息，我希望您可以做出以下更改：
html, body {
height: 100%;
width: 100%;
}
.maincontents {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
.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>我已经在 safari 和 Chrome 上进行了测试，并且按您的预期工作。以下是jsfiddle https://jsfiddle.net/1o3904xh/12/
我强烈建议任何人看到这个，让页脚留在页面底部，并将任何内容保留在上面，就像下面的方式一样。这是正确的语义，可以提高 SEO 和可访问性。通过这种布局，您的网页应该处于非常有利的位置。
您可以在此处阅读有关 HTML5 元素的更多信息
html, body {
width: 100%;
height: 100%;
}
article {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
main {
flex-grow: 1;
}
header, main, footer {
flex-shrink: 0;
}
.footer {
background-color: green;
}<html>
<body>
<article>
<header></header>
<main>
<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 />
Main contents13 <br />
Main contents14 <br />
Main contents15 <br />
Main contents16 <br />
</div>
</main>
<footer>
<div class="footer">
Footer1 <br />
Footer2 <br />
Footer3 <br />
</div>
</footer>
</article>
</body>
</html>希望这对您有帮助。