Can we define a style or CSS for one element depending on the characteristics of another element?

Question

Can we define a style or CSS for one element depending on the characteristics of another element?

One challenge I'm facing involves a 3rd party library (fullcalendar) that automatically sets the height of elements based on internal calculations to ensure they look good in any viewport:

<div style="height: 72px;">

Unfortunately, not all elements have their heights dynamically adjusted. I prefer not to modify the code of the 3rd party library and was considering if there is a way to transfer one element's style to another using CSS. For example:

.myDiv {
   height: anotherDiv.height
}

I'm open to alternative solutions that achieve the same result, but nothing else comes to mind.

html css

Answer 1

Answer №1

Not sure if you're searching for a solution involving Javascript (as CSS alone may not suffice), but here's an approach using it:

If you have two divs with different IDs:

<div id="div1" style="height: 72px;"></div>
<div id="div2"></div>

You can then retrieve the height property of the first div using getComputedStyle():

var element = document.getElementById('div1'),
    style = window.getComputedStyle(element),
    height1 = style.getPropertyValue('height');

Next, set this height value to the second div:

var div2 = document.getElementById('div2');
div2.style.height = height1;

Check out this JSFiddle link to see it in action.

Answer 2

Not sure if you're searching for a solution involving Javascript (as CSS alone may not suffice), but here's an approach using it:

If you have two divs with different IDs:

<div id="div1" style="height: 72px;"></div>
<div id="div2"></div>

You can then retrieve the height property of the first div using getComputedStyle():

var element = document.getElementById('div1'),
    style = window.getComputedStyle(element),
    height1 = style.getPropertyValue('height');

Next, set this height value to the second div:

var div2 = document.getElementById('div2');
div2.style.height = height1;

Check out this JSFiddle link to see it in action.

Answer 3

Answer №2

With a minimalist approach, you can achieve a sleek design.

.smooth_edges {
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      border-radius: 8px;
    }

    #section {
      .smooth_edges;
    }

    #sidebar {
      .smooth_edges;
    }

Answer 4

With a minimalist approach, you can achieve a sleek design.

.smooth_edges {
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      border-radius: 8px;
    }

    #section {
      .smooth_edges;
    }

    #sidebar {
      .smooth_edges;
    }

Answer 5

Answer №3

To achieve the same height for elements within a container, utilizing flexbox is recommended.

#container {
      display: flex;
      flex-direction: row;
      align-items:stretch /* This line ensures uniform height */
    }

#container > * {
  background:gray;
  border:1px solid black;
  margin-right:5px;
}

<div id="container">
      <div>
        Long<br>text<br>content<br>here
      </div>
      <div>
        Short content
      </div>
    </div>

Answer 6

To achieve the same height for elements within a container, utilizing flexbox is recommended.

#container {
      display: flex;
      flex-direction: row;
      align-items:stretch /* This line ensures uniform height */
    }

#container > * {
  background:gray;
  border:1px solid black;
  margin-right:5px;
}

<div id="container">
      <div>
        Long<br>text<br>content<br>here
      </div>
      <div>
        Short content
      </div>
    </div>

Can we define a style or CSS for one element depending on the characteristics of another element?

Answer №1

Answer №2

Answer №3

Similar questions

Managing various choices in a Select menu using a single submit button

How can you transfer data from a jQuery function to a designated div element?

Ways to make a chosen row stand out in an *ngFor loop?

Tips for connecting elements at the same index

Is the in-app browser of WeChat able to support self-signed HTTPS URLs?

Creating Sub Menu in Blogger with pageListJSON

Utilizing jQuery to Record the Status of HTML5 Forms

A guide to deactivating the Material UI Link API element

Copying text from an iframe using HTML and JavaScript

Tips for dragging and dropping a file attachment directly into your web browser

In what format is the parameter accepted by the .getDay() method?

Enhance and Modify feature using Javascript

Is it possible to alter CSS attributes dynamically without setting a limit on the number of changes that can be made?

I'm a complete programming newbie and I want to start learning JavaScript, jQuery, and other programming languages. Where should I

Explanation on subtracting the row value from a textbox

Why does the styling on my <a> tags in the footer only take effect when I apply padding to the form above?

Obtain the chosen option from an HTML select element by utilizing JavaScript

The image in the row wrap container spills over slightly

Ensuring that the contents hidden by overflow:hidden remain truly concealed

Ensure the video frame stretches to fit the full width