如何将绝对定位元素的高度设置为父元素的100%？

哦，这个坑我之前踩过好几次！你遇到的问题核心在于绝对定位元素的高度参照对象——默认情况下，父元素是static定位（HTML元素的默认定位方式），这时候绝对定位的子元素不会以它作为高度参照，反而会往上找最近的非static定位的祖先元素（如果没有的话就会参照视口），所以哪怕你给父div设了height:300px，子元素的height:100%也不会生效。

最简单的解决方案：给父元素添加定位上下文 #

只需要给父div加上position: relative，让它成为子元素的定位参照容器，这样子元素的height:100%就会继承父元素的300px高度了。

修改后的完整代码如下：

div.parent { 
  height: 300px;
  position: relative; /* 关键：建立定位上下文 */
}
.arrow {
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 102;
    width: 100px;
    justify-content: center;
    background: linear-gradient(to left, rgba(255, 0, 0, 0), rgba(22, 23, 25, 1));
}

<div class="parent">
    <div class="arrow">
        <img src="/path"/>
    </div>
</div>

额外说明 #

• 我给父div加了.parent类是为了避免全局div样式冲突，你也可以直接给目标父div设置样式，只要确保它的position不是默认的static就行（relative/absolute/fixed都可以，不过relative是最常用的，不会改变父元素的布局位置）。
• 如果你的父元素高度是由内容动态撑开的（不是固定值），那可能需要用其他方式（比如Flexbox或者Grid），但针对你现在的固定高度场景，加position: relative就完全够用了。

内容的提问来源于stack exchange，提问作者Takhir Munarbekov