Calc Issue in Headers

Hello, I’m having an issue with the calc function is a header section.

When I try to set the height of my “Hero” bar to say, calc(100vh-6em) or calc(100vh-100px) it doesn’t seem to take.
This is so I can fit both the Hero and the Navbar on the screen.

Any help would be appreciated.

Hello @aekokobe,

Thanks for writing in!

Your height will not work because the element treats it like a plain and invalid text.
You should be using this: calc(100vh - 100px); adding a space between the minuend and subtrahend.

Best Regards.

1 Like

Thank you so much! Such a small thing to miss. This has saved a lot of headache. I appreciate you guys!

You’re welcome!
We’re glad we were able to help you out.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.