Question

我的页面看起来与此完全相同

<article>
    <header>header</header>

    <section>section</section>

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

虽然这可能看起来太容易了，但我需要做三件事：

1）如果section小于可用高度，则页脚应位于底部（如果该部分变大，则页脚将仅位于页面的末尾（滚动））： documentation

2）它应该在IE10中工作（检查IE10中的演示，你会发现flexbox工作得不好：DEMO

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

任何帮助都将不胜感激!!

Answer 1

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

对于第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项，当我有更多时间时，我需要继续努力。也许有人可以在另一个答案中帮助你。请记住，代码中的模态是绝对定位的，这意味着它已从文档流中删除，并且页脚甚至不知道它存在。

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

1 个答案: