如何在 IE11 中使用 flexbox 制作粘性页脚？

Posted 2023-03-05

【中文标题】如何在 IE11 中使用 flexbox 制作粘性页脚？

【英文标题】：How to make a sticky footer using flexbox in IE11?

【发布时间】：2017-11-25 18:32:35

【问题描述】：

我正在尝试使用 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 的情况下实现这一点？

【问题讨论】：

不起作用。在这种情况下，“页脚”直接出现在“主”顶部的“页眉”下方。

嗯，是的，你可以将你的 flex:1 更改为 flex-grow:1 并且应该可以工作

【参考方案1】：

IE 有一个 min-height 错误，需要在 flex 列容器父级上使用 display: flex，在本例中为 html

Fiddle demo

像这样更新你的 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>

【讨论】：

min-height 错误在这种情况下不是问题。但是flex-grow: 1 可以解决问题，因为当您删除flex: 1 时，它会将flex-basis 重置为auto 默认值。

@Michael_B 在您对您的回答发表评论后，我刚刚发现了这一点，再次感谢

【参考方案2】：

在 main 上，而不是 flex: 1 使用 flex: auto。这应该就是你所需要的。

---

flex: 1 速记规则分解为：

flex-grow: 1 flex-shrink: 1 flex-basis: 0

flex: auto 速记规则分解为：

flex-grow: 1 flex-shrink: 1 flex-basis: auto

IE 无法解析flex-basis: 0。

更多信息：

flex property not working in IE

【讨论】：

这也有效..+1。不过，当默认为 0 1 auto 时，flex: auto 怎么会变成 1 1 auto？

啊哈，谢谢....之前真的错过了，以为只是改变了flex基础（我属于老一辈，我们不看手册:)

【参考方案3】：

真正帮助我的解决方案（可能不适用于所有情况）是添加以像素为单位的任意固定高度 - 最小高度会覆盖固定高度，因此不会出现裁剪内容。这是一个 CSS 示例：

.fullheight 
    min-height: 100vh;
    height: 200px; /*IE 11 flexbox min-height fix*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;

【参考方案4】：

因为这可能是一个理想的解决方案：如果您不一定要增加 main 标记，但仍要在底部对齐页脚：

html, body 
  margin: 0;
  display: flex;

html 
  height: 100%;

body 
  flex-flow: column nowrap;
  flex-grow: 1;

footer 
  margin-top: auto;

<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>

【参考方案5】：

这个答案 (@ceindeg answer) 部分为我工作，但缩小了父容器的大小，我有一个我想放在底部的背景。

---

所以我只去了position: absolute 的页脚only IE。

您只能对 IE 使用媒体查询，因此其他浏览器也可以正常工作（请看这里：How to target only IE (any version) within a stylesheet?）。

就我而言，我想瞄准 IE10 和 IE11，所以我使用了这个：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) 
  footer 
   position: absolute;
   bottom: 0;
  


  .parent-container 
    position: relative
    // Add some padding-bottom to the parent container so it won't be glued together
    padding-bottom: 30px;