flexbox 和 min-height 100vh 的多个问题

Question

我的页面看起来就像这样

<article>
    <header>header</header>

    <section>section</section>

    <footer>footer</footer>
</article>

虽然这看起来太容易了，但我需要它来做 3 件事：

1) 如果section 小于可用高度，页脚应位于底部（如果部分变大，页脚将简单地位于页面的末尾（滚动））：@987654321 @

2) 它应该可以在 IE10 中工作（查看 IE10 中的演示，您会发现 flexbox 不能很好地工作：DEMO

3) 最后，如果显示一个巨大的模态对话框（非常高），页脚应位于页面底部：DEMO

任何帮助将不胜感激！

Answer 1

您似乎已经完成了第 1 项。在我看来，flex-grow 是正确的选择。

对于Item #2，尝试将vendor prefixes 添加到您的CSS 中，这是flexbox 在IE10（和Safari 8）中工作所必需的。在此处查看浏览器支持信息：http://caniuse.com/#search=flex

如需快速添加所需的所有前缀，请在此处的左侧面板中发布您的 CSS：Autoprefixer。

另请注意，IE10 不支持current flexbox specification。

它只支持old "tweener" syntax，几乎没有其他浏览器使用。

关于 IE10 的底线：

2012 年 3 月的 [tweener] 草案没有对应的 flex-grow、flex-shrink 或 flex-basis——这些属性可以 只能通过flex 速记属性设置。

^{来源：https://stackoverflow.com/tags/flexbox/info}

对于第 3 项，我需要在有更多时间的时候进行处理。也许有人无法在另一个答案中帮助您。请记住，代码中的模态是绝对定位的，这意味着它已从文档流中删除，并且页脚甚至都不知道它存在。