IE11中absolute子元素height: 100%为0px，因其包含块是最近非static定位祖先，而IE11将flex-basis: auto或无显式高度的该祖先视为0；必须同时满足：父容器有position: relative、自身具备可计算高度（如height: 400px或min-height: 1px）、子元素设min-height: 0。

IE11中absolute子元素height: 100%为什么总是0px

因为它的包含块（containing block）不是你写的那个父容器，而是最近的非static定位祖先——但IE11在计算这个祖先的高度时，会把flex-basis: auto或未显式设高的父容器直接当成0，导致子元素height: 100%也继承为0px。即使父级写了position: relative，只要它本身高度不可测量，子元素就无基准可依。

必须同时满足的三个条件才能让height生效

只加position: relative或只写height: 100%都不够。IE11要求：

• 父容器有position: relative（确立定位上下文）
• 父容器自身具备可计算高度：比如height: 400px、min-height: 100vh，或display: -ms-flexbox + min-height: 1px
• 子元素显式设置min-height: 0（覆盖IE默认的min-height: auto，否则内容仍会撑高并破坏拉伸逻辑）

更稳妥的替代写法：用top/bottom代替height

避免依赖高度继承，直接用定位区间控制尺寸：

.parent {
  position: relative;
  min-height: 1px; /* IE11 stretch触发关键 */
}
.child {
  position: absolute;
  top: 10px;
  bottom: 20px;
  left: 20px;
  right: 20px;
}

这种写法不查父高、不走height继承链，在IE11里稳定输出像素值，且兼容滚动容器和响应式变化。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

别踩这些IE11专属坑

常见失效组合：

• 父容器用了display: flex但没补display: -ms-flexbox和-ms-flex声明 → 子项height: 100%被忽略
• 写了flex: 1却没配min-height: 0 → IE11按flex-basis: 0px拉伸，内容被裁掉
• 用zoom: 1触发hasLayout但忘了加position: relative → 定位参考错乱，top/left偏移失准
• 移动端调试时只测vh，没意识到iOS Safari的地址栏收起会让100vh跳变 → 改用dvh或固定min-height

最常被忽略的是：你以为在调子元素，其实它卡在某个overflow: hidden的父层里——先加outline: 1px solid red把所有盒子显形，再判断是计算错误还是被裁剪。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！