CSS Variablen auslesen

0 Pluspunkte 0 Minuspunkte

Kann ich ein CSS Element anhand eines anderen Element berechnen. Also in etwa so:

.container {
    height: 200px;
}

.dynamic-element {
    height: calc( get_height_from("container") );
}
von  

2 Antworten

0 Pluspunkte 0 Minuspunkte

Nein das geht nicht, du kannst die Höhe aber mit Javascript dynamisch anpassen.

const container = document.querySelector('.container');
const dynamicElement = document.querySelector('.dynamic-element');
dynamicElement.style.height = container.offsetHeight + 'px';
von  
0 Pluspunkte 0 Minuspunkte

Du kannst es mit CSS Variablen und Javascript versuchen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200px;
      background-color: lightgray;
    }

    .dynamic-element {
      width: var(--dynamic-width, 50%); /* Use a CSS variable as the default width */
      height: 100%;
      background-color: orange;
    }
  </style>
  <script>
    const container = document.querySelector('.container');
    const dynamicElement = document.querySelector('.dynamic-element');

    // Update the --dynamic-width CSS variable with the container's width
    dynamicElement.style.setProperty('--dynamic-width', container.offsetWidth * 0.5 + 'px');
  </script>
</head>
<body>
  <div class="container">
    <div class="dynamic-element"></div>
  </div>
</body>
</html>
von  

Ähnliche Fragen