时间戳

首页 > 解决方案 > 第一个兄弟 div 被视为第二个动态 div 的背景

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>

我希望当第二个 div 高度由于其动态内容而增加时，第一个 div 高度应该自动增加。

到目前为止，我能够将一个 div 放在另一个之上，

.content {
    width: 70%;
    height: auto;
    border:1px solid;
    position: absolute;
    z-index:10;
    background-color: white;
}

.bluredBackground {
    width:70%;
    height:70%;
    background-color: red;
    z-index:0;
    border:1px solid;
    position:absolute;
    -webkit-filter: blur(2px);
}

如何用 CSS 解决这个问题？我正在尝试这个东西> http://jsfiddle.net/hsinghbisht/nLj5dqay/2/

请帮忙！

提前致谢。

标签： javascripthtmlcss

解决方案

这不是对问题的直接回答，但是您究竟打算如何将第二个 div（模糊）与第一个 div 高度相同？

如果你想要花哨的红色模糊眩光，那么只需使用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`;
}

推荐阅读