Dylan Dylan - 1 year ago 111
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.


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 Source

Make your <nav> position fixed.


nav {
  position: fixed;

Instead of:

nav {
  position: absolute;

Hope this helps!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download