Height 100vh - JavaScript 中其他元素的高度

Question

I have this code:

document.querySelector('.saved').style.height = '100vh' - document.querySelector('.header').offsetHeight + 'px';

I want to make the div.saved have height 100vh - height of div.header . The code on top doesn't work. What do I do?

Answer 1

您可以使用内置的 css函数 calc

document.querySelector('.saved').style.height = 'calc(100vh - ' +   document.querySelector('.header').offsetHeight + 'px)';

Answer 2

You are missing a calculate call in CSS. Your code does not make the browser aware of the fact that it has to calculate the height of the element. Something like

document.querySelector('.saved').style.height = 'calc(100vh - ' +  document.querySelector('.header').offsetHeight + 'px)';

should work.

Answer 3

You cannot subtract vh and pixel. Get the whole screen height and subtract it with the height of your element.