Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by jlampstack
jlampstack
23,932 Points

100vh - px ???

Using SASS / SCSS,

Is there a way to calculate the remainding height of the browser screen size. For example 100vh - The height of the Navigation menu?

I've already used calc(100vh - 40px) and it works....

The problem is by using calc(), CSS transitions don't seem to work. Is there a work around for this? Would creating a @function work in this scenario? How would I do so?

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi there,

Using Calc, should work for you.

Have you factored in the entire size of the element you want to calculate? I'm assuming you're trying to create a sticky footer bar. The entire size (or height) of the element includes the element itself, plus any padding, border and margin applied to it.

Good luck! :-)

jlampstack
jlampstack
23,932 Points

Hi Jonathan,

calc() does work, but the problem is transitions don't work properly when calc() is applied. I'd like to make a responsive top nav-menu that slides down when the hamburger button is pressed.

My code works with calc(), but with calc() there is no animation, it just jumps from the open state to closed state etc.