Javascript 第一个同级div被视为第二个动态div的背景

HTML标记

    <div class="bluredBackground"></div>
    <div class="content">
       Hi This is dynamic content.<br>
       If the div height increases then first div height <br>
       should be automatically increase.
    </div>

我如何用CSS解决这个问题？ 我在尝试这件事>

请帮忙

---

提前感谢。

这不是对问题的直接回答，但第二个分区（模糊）与第一个分区处于同一高度时，您具体计划做什么

如果你想在后面看到漂亮的红色模糊眩光，那么只需使用

box shadow

。将它添加到

.content

中，它的工作原理将完全相同

box-shadow: 0px 0px 4px 0px red;

但是，如果您确实需要使用红色模糊div，那么您无法使用普通CSS解决这个问题。您必须使用JavaScript并查找一个元素的类样式，然后将其复制到下一个元素

例如：

window.onload = () => 
{
  const div1 = document.querySelector('.bluredBackground');
  const div2 = document.querySelector('.content');

  div1.style.height = `${div2.offsetHeight}px`;
}

---

这并不是对问题的直接回答，但当第二个分区（模糊）与第一个分区处于同一高度时，您具体计划做什么

如果你想在后面看到漂亮的红色模糊眩光，那么只需使用

box shadow

。将它添加到

.content

中，它的工作原理将完全相同

box-shadow: 0px 0px 4px 0px red;

但是，如果您确实需要使用红色模糊div，那么您无法使用普通CSS解决这个问题。您必须使用JavaScript并查找一个元素的类样式，然后将其复制到下一个元素

例如：

window.onload = () => 
{
  const div1 = document.querySelector('.bluredBackground');
  const div2 = document.querySelector('.content');

  div1.style.height = `${div2.offsetHeight}px`;
}

---

谢谢你的回答，我想用第一个div作为模糊的背景，第二个动态div在前景。在这种情况下，我想避免使用js，在最坏的情况下，我会使用它。我假设您只需要边界上红色模糊的第二个div，但在这种情况下，只需使用我上面编写的js片段，并根据您的判断执行它（无论是通过window.onload还是函数调用或其他方式）。如果这对你有帮助，别忘了标记答案。谢谢你的回答，我想用第一个div作为模糊的背景，第二个动态div在前景。在这种情况下，我想避免使用js，在最坏的情况下，我会使用它。我假设您只需要边界上红色模糊的第二个div，但在这种情况下，只需使用我上面编写的js片段，并根据您的判断执行它（无论是通过window.onload还是函数调用或其他方式）。若这对你们有帮助，别忘了标出答案。