%ages in my navbar

Hi,

Please take a look at this page (but don’t care about the design for now^^).

My problem is the header and the unit percentages.

Now look at the little blue box at the right of the header.
Those blue boxes I wanted to change with the following class:

.navbar-links li {
  list-style-type: none;
  height: 100%;
  background-color: blue;
}

If you look now at the inspector and click on the different parent elements you will see that the next parent element which has a concrete value of height is

nav.navbar
.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: lightgreen;
	padding: 2em 0;
	margin: 2em 0;
	height: 200px;
}

However, as you can see, the blue boxes are much smaller…

Can anybody tell me what I don’t understand here?

Best wishes,

Chris

Hello!

When the li tags are set to 100%, they are growing to the height of the parent element. In this case, that doesn’t refer to the .navbar with it’s fixed height, but to the ul element and then the .navbar-links div, both of which are still on the default height, therefore it only grows to the height of those two parent elements.

If you add CSS rules to increase the height of those, you’ll end up with this, which I believe is the intended result?
image

Happy coding!

1 Like

Thanks for your answer, @notlyall !

I think I understand this now, however I have the feeling that these guys here are wrong or explain it in a bad way?

Interestingly, when the parent element doesn’t have a defined height, the browser will keep going up level by level until it finds a concrete value that it can work with.

(In the middle of the page).

I thought, in my case the parent elements without defined height are ul and navbar.links cause I don’t see a defined height here:

.navbar-links ul {
	display: flex;
	margin: 0;
	padding: 0;
}

Best wishes,
Chris

Hey!

Oh huh that’s interesting and in that case to be honest, I’m not certain. By the looks of it, it’s not acting the way described in that article but I’d be hesitant to comment on it any further without being sure. Not the most fulfilling answer I know (sorry!) but I’d rather be sure that I’m actually being helpful then give out misleading information.

As with a lot of things when it comes to nuances within web development, I’d say the best option is just to test it in a simple environment with no other elements or other CSS rules that could possibly interfere. I’m not going to have a good opportunity to do that for a little while, but I’m happy to once I can to give a more definitive answer. Alternatively perhaps you could give some testing a go, it’s a perfect opportunity to practice with it! :smile:

Happy coding!

1 Like

Hey, no problem. You helped me by telling me that I have to set a height for ul and navbar-links :wink:

1 Like