How to: Subtract a CSS value from a JS variable height?

Question

How can I subtract from the navbar_height for example 2rem in the following function?

navbar_height = document.querySelector(".navbar").offsetHeight;
document.body.style.paddingTop = navbar_height + "px";

Thanks!

Answer 1

You can use calc

navbar_height = document.querySelector(".navbar").offsetHeight;
document.body.style.paddingTop = `calc(${navbar_height}px - 2rem)`;