如何在IE11中使用flexbox制作页脚？
我正在尝试使用flexbox做一个简单的设计，但是IE11遇到了麻烦。基本上，我希望页脚仅在内容不够高时才停留在底部。我在使用Chrome这样的操作时没有问题：
*,
*:after,
*:before {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
<header>
Header
</header>
<main>
<p>Main</p>
<p>Main</p>
<p>Main</p>
<p>Main</p>
<p>Main</p>
</main>
<footer>
Footer
</footer>
只是玩一些，<p>main</p>以查看IE11错误的行为。
没有JavaScript，有没有办法实现这一目标？
问题答案：
IE浏览器存在一个min-height错误，并且需要display: flex在弹性列容器父项上进行操作，在这种情况下，html
像这样更新您的CSS
*,
*:after,
*:before {
box-sizing: border-box;
}
html, body {
margin: 0;
display: flex;
}
body {
flex-direction: column;
min-height: 100vh;
}
main {
flex-grow: 1;
}
<header>
Header
</header>
<main>
<p>Main</p>
<p>Main</p>
<p>Main</p>
<p>Main</p>
<p>Main</p>
</main>
<footer>
Footer
</footer>
-
我试图用flexbox做一个简单的设计，但我在IE11上遇到了麻烦。基本上，我想要一个页脚，只有在内容不够高的情况下才会粘到底部。我对Chrome这样做没有异议： 只玩
-
问题内容： 当居中的flexbox项溢出其容器时，它们可能具有不良行为。 已经针对此问题提供了几种非灵活的解决方案，但是根据MDN，存在一个如下所述的值。 如果项目的大小溢出对齐容器，则将对齐该项目，就好像对齐模式已开始一样。 可以如下使用。 不幸的是，我无法找到任何示例或讨论，也无法确定浏览器对此有多少支持。 我试图在此CodePen中使用。但是，它对我不起作用。本似乎被忽略，或者容器元素是不正
-
长期潜伏者，第一次海报。 基本原则如下： 受这篇博客文章的启发，我试图为我们的QA团队创建一个书签来快速填充表单。 bookmarklet在Chrome、IE 10和IE 9兼容模式下的my machine（TM）上运行非常完美。我已经在QA团队的机器上测试了bookmarklet，虽然它在Chrome浏览器和IE9上运行良好，但bookmarklet在运行IE11的两台机器上不起作用。 详情：
-
问题内容： 我想制作这个UI，每个都是div。标头高度为30像素。页脚为30px。但是我不知道内容的高度。我需要使用用户框架进行计算。 总高度应为100％。 我可以用纯CSS做到吗？ 问题答案： 使用flexbox，这很容易实现。 将包含3个隔层的包装器的高度设置为或。包装器的高度将填满整个高度，这将使该包装器的所有子级具有适当的flex-properties（例如），由flexbox-magic
-
问题内容： 我正在尝试编写一个分为三部分的搜索菜单。如果没有足够的垂直空间显示结果，则每个部分都会有一个滚动条。 在Chrome和Firefox中，每个菜单都显示其滚动条，但是在IE11上，菜单与包装器重叠。 我已经编写了一个可在Chrome和Firefox上运行的示例（Firefox很棘手，我需要添加多个菜单级别）。 我在IE 11上缺少什么吗？ 问题答案： 要在Chrome，Safari，Fi
-
问题内容： 如果使用IE11，似乎无法正确计算弹性项目宽度。 4个盒子每个都有flex-basis：50％，所以我们应该得到两行，每个盒子两个，但是在IE11中，每个盒子只有一行。将边框设置为0时，它可以正常工作。 知道这是一个错误还是有办法使IE11表现出来（并且仍然使用边框）？ PS值得庆幸的是，在我的项目中，仅需要支持流行浏览器的最新版本，但是IE11就是其中之一。 问题答案： 使用该属性计