The initial div sibling is utilized as the backdrop for the subsequent dynamic div

Question

The initial div sibling is utilized as the backdrop for the subsequent dynamic div

Exploring HTML Markup,

    <div class="blurredBackground"></div>
    <div class="content">
       Hello! This content is always changing dynamically.<br>
       If the height of the second div increases, 
       I need the first div's height to increase accordingly.
    </div>

I am looking for a solution where the first div's height will adjust automatically when the second div's height changes due to dynamic content.

Currently, I have successfully stacked one div on top of another,

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

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

Is there a CSS solution to this issue? I have experimented with this approach > http://jsfiddle.net/hsinghbisht/nLj5dqay/2/

Your assistance is greatly appreciated!

Thank you in advance.

javascript html css

Answer 1

Answer №1

While this may not directly address the initial query, have you considered what you intend to achieve by aligning the second blurred div with the first at the same height?

If your goal is to create a stylish red blur effect in the background, you can easily accomplish this using the box-shadow property. Simply apply it to the .content class for similar results.

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

However, if your heart is set on having a separate red blurred div element, standard CSS alone won't cut it. In that case, you'll have to incorporate JavaScript to dynamically match the styling of one element with another.

For instance:

window.onload = () => 
{
  const firstDiv = document.querySelector('.blurredBackground');
  const secondDiv = document.querySelector('.content');

  firstDiv.style.height = `${secondDiv.offsetHeight}px`;
}

Answer 2

While this may not directly address the initial query, have you considered what you intend to achieve by aligning the second blurred div with the first at the same height?

If your goal is to create a stylish red blur effect in the background, you can easily accomplish this using the box-shadow property. Simply apply it to the .content class for similar results.

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

However, if your heart is set on having a separate red blurred div element, standard CSS alone won't cut it. In that case, you'll have to incorporate JavaScript to dynamically match the styling of one element with another.

For instance:

window.onload = () => 
{
  const firstDiv = document.querySelector('.blurredBackground');
  const secondDiv = document.querySelector('.content');

  firstDiv.style.height = `${secondDiv.offsetHeight}px`;
}

The initial div sibling is utilized as the backdrop for the subsequent dynamic div

Answer №1

Similar questions

Distinguishing CSS Variances on ASP.Net Site with Android 4+

Is there a way to include all images from a local/server directory into an array and then utilize that array variable in a different file?

Send an API call for every item in a given list

The jQuery .click() function is not triggering when clicked

Achieving a cumulative running balance using Vue js for nested arrays

Angular: bypassSecurityTrustHtml sanitizer does not render the attribute (click)

Error message: The function send() cannot be applied to the object received by request.post() in Node

Unable to activate function when closing Vuetify v-alert

Set the styling of a div element in the Angular template when the application is first initialized

Distinctive titles for JavaScript constructors/prototypes compared to classes

The CSS classes from Bootstrap are failing to function properly despite my best efforts in

Using AngularJS to load a custom JavaScript file within an ng-view

How can I make the Bootstrap tooltip only appear when clicked inside a Vue Component and disappear when hovered over?

What is the best way to remove an item from my online shopping cart using JavaScript?

Manipulate and synchronize state in Vue using vuex from a separate component

Angular Table with Loading Bar

In JavaScript, I aim to decompress a zip file containing binary data by unzipping it

Accessing individual .env files defined in the package.json

The VUE project I'm working on seems to be having compatibility issues with the Bootstrap modal in V

Creating a new list by grouping elements from an existing list