Html CSS div 100% to height

Question

Just to prevent I do my project on vuejs but that does not change the way of placing a div normally (html-css is still the same thing) x)

Well I made a small diagram to facilitate the explanation:

diagram

I need the div to go paste this at the bottom of the screen, the problem is that I cannot apply a% or a vh to it because the navbar at a fixed height (and therefore will push my div towards the down on the small screens).

usually I place my div below my navbar, I apply height: 100vh and a padding-top the size of the div, but this time I prefer not to place it under the navbar.

So how i can do something like : height: 100vh - height of navbar

I also specify that I would like (if possible) not to use js, because my navbar and my div are different components from vueJS and therefore it would be quite tedious just for a height I think

I don't know if my explanation is clear but thanks for taking the time to read :)

Answer 1

You can use calc(100vh - HEIGHT_OF_NAVBAR) for that.

myElem {
  height: calc(100vh - NAV_HEIGHT); /*where NAV_HEIGHT can be px, em or whatever */
}