Dylan Dylan - 24 days ago 8
CSS Question

CSS 100% height not working but body is 100% height?

I am working on my new site and I have 4 sections header, nav, main and footer.

If you make the window smaller on the vertical side the navbar height works propperly.

working

But if you make the window smaller on the horizontal side, so the content goes down.

not working

I don't understand why the navbar isn't 100% anymore? The body is 100% and the navbar should have the same height but it isn't?
body is 100%

nav is 100%

I tried 100vh but it isn't working either and I think 100% should work?

Answer

Make your <nav> position fixed.

Use:

nav {
  position: fixed;
}

Instead of:

nav {
  position: absolute;
}

Hope this helps!