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里稳定输出像素值，且兼容滚动容器和响应式变化。
立即学习“前端免费学习笔记（深入）”；
别踩这些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把所有盒子显形，再判断是计算错误还是被裁剪。
