Can't get 100vh/100% to work

Hello! I’ve been trying desperately to get my nav bar to extend the full viewport height, but for the life of me I can’t figure out what I’m missing. It extends a bit, then just stops. I have the body and html set to 100, but the dang child refuses to inherit. I’ve tried using just percentages, and then just using vh, but neither worked. Any advice would be appreciated!

1 Like

Hey! We’ve all been there… :sweat_smile: Try running it on firefox and use this handy button (after right-click inspect element). Screen Shot 2020-06-29 at 10.24.12 AM

Then, when you hover over your nav bar, it can tell you what it’s interpreting your nav bar attributes to be (and will not only give you a warning for css errors, but a link to possible solutions in the MDN documentation!).

1 Like

Thank you! I inspected it, and the div wasn’t inheriting its height from the body. I tried getting rid of the float and other variables…it still refuses to inherit height from the body. I ended up just setting its position to fixed. I’m still at a loss for why it won’t work.

1 Like

It has to do with syntax. When in doubt, you can just be specific. But you should play around with this and check the MDN documentation in depth to see more specific cases :slight_smile: Note: there are more precise and fancy ways ( [class*="button-"]) to do this than my example but this is just a basic idea.

.button {
  display: block;
  border-radius: 1em;
  background-color: black;
  color: white;
}

.button-warning {
  background: none;
  color: red;
 
}

//in html
<a class="button button-warning">Warning</a>
// this means button-warning "inherits" the qualities of button

@margcee I’d be remiss if I didn’t recommend Kevin Powell’s css tutorials on youtube. They are the best ones (in my opinion) by leaps and bounds and very easy to understand.