3 行，100% 高度的 flexbox 布局在 android 上不起作用答案

【问题标题】：3 rows, 100% height flexbox layout doesn't work on android3 行，100% 高度的 flexbox 布局在 android 上不起作用
【发布时间】：2017-06-11 20:59:50
【问题描述】：

请看：

https://jsfiddle.net/sgtooLnb/1/

所以基本上是一个 flexbox 列布局和一个像这样的 html 结构（我必须为解析器添加更多代码..）：

<header>The header content goes here.</header>
<div class="content">The main content goes here.</div>
<footer>The footer content goes here.</footer>

在 android (4.4.2) 上，这样的布局似乎不起作用。页脚将始终停留在底部，而溢出的内容将位于页脚下方。

遗憾的是，您无法从 jsfiddle 中看到这种行为，但也许你们中的一些人以前也遇到过同样的问题。

有什么办法吗？

【问题讨论】：

尝试将正文更改为min-height
你的完整代码是什么（带有html、head、body...标签）？
首先，您不应该发布另一个与之前几乎完全相同的问题。我还建议将其作为一个骗局关闭，以支持您之前的问题，如果您愿意，您可以在那里发布您的答案。我还在另一个地方发布了一个答案，涵盖了 Android 修复和 IE 修复。
首先，不一样。其次，我不能，因为它被阻止了。第三，您的解决方案不适用于身体容器，因此不是解决方案。第四，我的解决方案有效，请阅读它以及我最初提供的外部文档和 IE 变体。或者按照建议使用 Autoprefixer。

标签： css html sass flexbox

【解决方案1】：

好的，通过更好地激怒this 和this，我发现问题出在this，即使受影响的浏览器列表中没有提到Android。所以，我的解决方案是在内容中添加 flex-shrink: 0：

body{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.main-content{
  flex: 1 0 auto; // flex-shrink:0 > android 4.4.2 fix (and some other browsers too)
}

为页眉和页脚分配某种 flex 属性也很好。我注意到在 Android 442 上，否则 bg 颜色消失了：

.main-header,
.main-footer{
    flex: none; // or flex something.
}

另外请注意，我使用的是 Autoprefixer。否则，您不应该在 main-content 上使用快捷方式（IE shit-fix）：

.main-content{
  flex-grow: 1;
  flex-shrink:0;
  flex-basis:auto;
}

最后，对于否决该线程的人：您在 jsfiddle 上有相关代码。此外，如果您真的了解该主题，则不需要任何代码。如果你不知道这个主题，你不应该对任何事情投反对票。现在请再次投票，所以这个材料不会帮助任何人。这是主要的 stackoverflow 目标吗？

【讨论】：

这适用于 Android 4.4.2 吗？ jsfiddle.net/4c3gk4ax/2 ... 无论是作为粘性页脚还是内容溢出时？
此解决方案适用于 IE11 以及 android 4.4.2。另外，我目前正在使用 android 4.4.2，就像我的很多朋友一样：并不是所有的人都会在当前运行良好的情况下不断花钱购买新手机。
这里是您建议的解决方案的 2 个版本，都使用 Autoprefixer，一个内容很少，codepen.io/anon/pen/qRVZxj，一个内容很多，codepen.io/anon/pen/apVNYp 这些都是根据正确的解决方案，两者都适用Android 和 IE？

【解决方案2】：

你的 flex 元素 (body) 的子元素也必须是 display: flex。如果添加样式

body > * {
    display: flex;
}

相信你会得到想要的结果

【讨论】：