How can I pass div height from JavaScript to CSS?

Question

I want to set the position to a div depending on its own height which can be different depending on the content.

This is the structure:

HTML

<div class="wrapper">
Content
</div>

CSS:

:root {
  --height: x;
}

.wrappper {
height: auto;
top: calc(100vh - var(--height));
}

If this is related to your previous question, which it appears you've now deleted, I would strongly suggest you implement a Flexbox layout instead of relying on JS to create magic numbers for your UI positioning. — Rory McCrossan, Sep 07 '22 at 20:38
@RoryMcCrossan yes, felt that thread was a mess and unclear so redid it. With the answer below I solved it, but take a look at https://www.arkipelad.se/lab, do you think that's possible with flex box? — RASALGHUL, Sep 07 '22 at 20:47

score 2 · Accepted Answer · edited Sep 07 '22 at 19:57

.clientHeight gives you height of the object. I'm just assigning that to the CSS variable.

 let div = document.querySelector(".wrapper")
        var height = document.querySelector(':root');
        height.style.setProperty('--height', div.clientHeight + "px");

:root {
        --height: x;
    }

    .wrapper {
        outline: 1px solid red;
        height: auto;
        position: relative;
        top: calc(100vh - var(--height));
    }

<div class="wrapper">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatibus, officiis! Lorem ipsum dolor sit amet
            consectetur, adipisicing elit. Dolore accusantium deserunt corrupti iure praesentium in reprehenderit
            placeat mollitia culpa labore nostrum, cumque obcaecati et sapiente dolores excepturi libero maiores
            arch</p>
    </div>

yes. try this & check with console `let div = document.querySelector(".wrapper") window.addEventListener("resize",()=>{console.log(div.clientHeight) })` — UmairFarooq, Sep 12 '22 at 18:22

Steffen · Answer 2 · 2022-09-07T19:49:00.843

1

To change a CSS variable (--height) in JavaScript, you can use:

var r = document.querySelector(':root');
r.style.setProperty('--height', <YOUR_HEIGHT>+'px');

Here is a small example where we change a CSS variable (--width) on a button click:

var r = document.querySelector(':root');
r.style.setProperty('--width', '100px');

function swapSize() {
  if (getComputedStyle(r).getPropertyValue('--width') == '100px') {
    r.style.setProperty('--width', '200px');
  } else {
    r.style.setProperty('--width', '100px');
  }
}

:root {
  --width: 100px
}

div {
  height: 100px;
  width: var(--width);
  background-color: blue;
}

<div></div>
<button onclick="swapSize()">swap variable value</button>

edited Sep 07 '22 at 19:49

answered Sep 07 '22 at 19:36

Steffen

501
1
14

I see, thanks! But if you want another divs height or width to be the data, not a specific value? – RASALGHUL Sep 07 '22 at 19:51
1

Have a look [here](https://stackoverflow.com/a/15615701/19926805). Just read the height from the element you want, save it into a variable and use the variable instead of of the abstract example above – Steffen Sep 07 '22 at 20:10

How can I pass div height from JavaScript to CSS?

2 Answers2