How to set a section to 100vh minus the header height?

I have a section set to 100vh and my is header 130px. Now my page extends 130px further down than 100vh.

How can I have the content be only 100% high if not with 100vh?

Negative margins seem laborious when it comes to mobile responsive, where my header gets smaller.

What am I missing?


If you have a fix header height, you can assing the height of the container with a calc function

calc(100vh - 130px )

If the height is moving I usualy do it with this code:


You are a gentleman. Thank you very much for that brilliant answer!

(And, it seems I did not miss anything.)

1 Like