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

我试图用flexbox做一个简单的设计，但我在IE11上遇到了麻烦。基本上，我想要一个页脚，只有在内容不够高的情况下才会粘到底部。我对Chrome这样做没有异议：

*，
*：之后，
*：之前{
框大小：边框框；
}
html，
身体{
身高：100%；
保证金：0；
填充：0；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
主要{
弹性：1；
}

标题
主要

主要

主要

主要

主要

页脚

IE有一个

min height

错误，需要在flex column containers父项上显示

display:flex

，在本例中为

html

像这样更新你的CSS

*，
*：之后，
*：之前{
框大小：边框框；
}
html，正文{
保证金：0；
显示器：flex；
}
身体{
弯曲方向：立柱；
最小高度：100vh；
}
主要{
柔性生长：1；
}

标题
主要

主要

主要

主要

主要

页脚

在

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时遇到问题

更多信息：

---

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

.fullheight{
最小高度：100vh；
高度：200px；/*IE 11柔性箱最小高度固定*/
显示器：flex；
对齐项目：居中；
证明内容：中心；
柔性包装：包装；
对齐内容：居中对齐；
}

因为这可能是一个理想的解决方案：如果您不一定要增加

main

标记，但仍要对齐底部的页脚：

html，正文{
保证金：0；
显示器：flex；
}
html{
身高：100%；
}
身体{
柔性流动：柱状nowrap；
柔性生长：1；
}
页脚{
页边顶部：自动；
}

标题
主要

主要

主要

主要

主要

页脚

这个答案（）对我部分有效，但缩小了父容器的大小，我想在底部放置一个背景

---

所以我只选择了

位置：绝对

作为页脚只作为IE

您只能对IE使用媒体查询，因此其他浏览器可以正常工作（请看这里：）

在我的例子中，我想瞄准IE10和IE11，所以我使用了这个：

@介质全部和（-ms高对比度：无），（-ms高对比度：激活）{
页脚{
位置：绝对位置；
底部：0；
}
.父容器{
职位：相对
//在父容器底部添加一些填充物，使其不会粘在一起
填充底部：30px；
}
}

不起作用。在本例中，“页脚”直接显示在“Main”顶部的“Header”下方。啊，是的，您可以将flex:1更改为flex-grow:1，这应该可以工作。这也可以工作..+1。尽管如此，当默认值为

0 1 auto

时，

flex:auto

为什么会变成

1 auto

？啊哈，谢谢……以前真的错过了这一点，虽然它只改变了flex的基础（我属于老一代，我们不阅读手册：）

min height

错误不是本例中的问题。但是

flex-grow:1

会起作用，因为当您删除

flex:1

时，它会将

flex-basis

重置为

auto

默认值。@Michael_B我刚才在您的回答中给出了您的评论之后，发现了这个问题，再次感谢