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 Aurelian Spodarec
Aurelian Spodarec
10,801 Points

My Mobile nav won't expand 100% height, why?

Hi,

If you go mobile view, on my site here https://aurelianspodarec.github.io/hcOriginalAurePortfolio/

You see that it never exdents to 100%.

If you are going to do this, go on development tools, and select iphone6 or iphone 4. Even if you use height 100vh, there will be a small gap in the bottom etc..

Not sure why this does like this, as I'm sure it should take 100% of the height as it's absolute off canvas.

1 Answer

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

It could be a case of margin-collapse causing the white gap to appear.

Try using ChromeDev Tools to scope out which element is causing the margin to bleed over and if you set a 0 margin to that element that should cause the gap to vanish.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I tried that too.

And you can hover over that and nothing happens anyways.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Well, I looked support for VH in IE 11, it's not the best.. and what more for IE 10 and 9 .

So I used a little hack, I don't know if it's good or not.. something i remembered that works is this padding-bottom: 9999px; margin-bottom: -9999px;

and boom

DO you think that's a good aproach? I updated the site