如何在不使用JavaScript的情况下让父div高度匹配前景div高度

当然可以实现！你当前的问题核心在于：父容器用了h-screen固定死了视口高度，再加上文本容器是absolute定位脱离了文档流，导致父容器完全感知不到文本内容的实际高度，自然背景就没法跟着文本走了。

给你两个简单的纯CSS方案，都能完美解决这个问题：

方案一：利用CSS Grid实现层叠布局 #

把背景和文本放在同一个网格单元格里，网格容器会自动根据文本内容的高度来调整自身高度，背景则会填满整个容器。

修改后的代码如下：

<div class="w-screen grid">
  <!-- 背景动画组件，设置为绝对定位填满网格容器 -->
  <LongBackgroundAnimation class="absolute inset-0" />
  <!-- 文本容器，和背景同属一个网格单元格，自动层叠在上方 -->
  <div class="z-10 m-8 backdrop-blur">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

方案二：将背景作为文本容器的子元素 #

把文本容器设为相对定位，背景动画作为它的绝对定位子元素，这样文本容器的高度会由内部文本自动撑开，背景则会铺满整个文本容器的高度，结构更直观。

代码示例：

<div class="w-screen">
  <div class="relative m-8 z-10 backdrop-blur">
    <!-- 背景动画组件，绝对定位填满父容器 -->
    <LongBackgroundAnimation class="absolute inset-0 z-[-1]" />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

关键原理说明 #

• 去掉父容器的h-screen，让它由内容决定高度；
• 避免让文本容器脱离文档流（除非用Grid/相对定位的方式让父容器仍能感知内容高度）；
• 用absolute inset-0让背景自动填满对应的容器高度，不管文本是否溢出视口，容器都会跟着文本内容滚动，背景高度也会完全匹配。

备注：内容来源于stack exchange，提问作者cayblood